首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

百度跟优酷的搜索体验改善,类似Google Instant搜索

2012-09-21 
百度和优酷的搜索体验改善,类似Google Instant搜索转载:http://www.cnblogs.com/samwu/archive/2011/06/29

百度和优酷的搜索体验改善,类似Google Instant搜索

转载:http://www.cnblogs.com/samwu/archive/2011/06/29/2093761.html

上次看到国外那谁谁实现了Youtube的Instant搜索,据说花了三小时。

我笑了,我看了那篇文章后,自己花了三小时,实现了百度和优酷的Instant搜索体验。

难点在于,键盘输入的监听。用了JQuery自带的keyup函数,再加JS自带的setTimeout函数,较好地实现了效果。 <!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
????<title></title>
????<style?type="text/css">
????.hidden
????{
????????display:none;
????}
????.show
????{
????????display:block;
?????????border:0;
????}
????#up
????{
????????margin:-100px?0?0?0;
????????width:1300px;
????????height:900px;
????????
????????/*?text-align:center;??*/
????}
????
????????#getKey
????????{
????????????height:?36px;
????????????width:?379px;
????????????font-size:large;
????????????
????????}
????
????</style>
????<script?src="JS/jquery-1.4.2-vsdoc.js"?type="text/javascript"></script>
????<script?type="text/javascript">
????????var?baidu?=?1;?var?youku?=?0;
????????var?getKey;?
????????function?gotothere()?{
????????????getKey?=?$("#getKey").val();
????????????if?(getKey?==?"")?{
????????????????//alert("sorry");
????????????????//$("up").className?=?"show";
????????????}
????????????else?{
????????????????if?(baidu?==?1)?{
????????????????????$("#up").attr("src",?"http://www.baidu.com/s?wd="?+?encodeURI(getKey)?+?"&inputT=624&ie=utf-8");
????????????????}
????????????????else?if?(youku?==?1)?{
????????????????????$("#up").attr("src",?"http://www.soku.com/search_video/q_"?+?getKey);
????????????????}
????????????}
????????}
????????$(function()?{
????????????$("#getKey").keyup(function()?{//监听键盘按下事件
????????????????
????????????????var?timer?=?setTimeout("gotothere()",?500);//有时候键盘按得太快,监听事件来不及反应,所以用setTimeout函数来延迟
????????????});


????????});

????????$(function()?{
????????????$("#baidu").click(function()?{
????????????????baidu?=?1;?youku?=?0;
????????????????$("#up").attr("src",?"http://www.baidu.com/s?wd="?+?encodeURI(getKey)?+?"&inputT=624&ie=utf-8");
????????????});
????????????$("#youku").click(function()?{
????????????????youku?=?1;?baidu?=?0;
????????????????$("#up").attr("src",?"http://www.soku.com/search_video/q_"?+?getKey);
????????????})
????????})

????</script>
</head>
<body?style="overflow-y:?hidden;">
请输入你想要搜索的关键字:<input?id="getKey"?type="text"?/><a?href="#"?id="baidu">百度</a>&nbsp|&nbsp<a?href="#"?id="youku">优酷</a><br?/>
<div?style="overflow:hidden"><iframe?id="up"?class="show"?frameborder="0"?></iframe></div>
</body>
</html>

热点排行