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

效果查看

firefox和ie可用,oepra有少许问题!

上次看到国外那谁谁实现了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 = 1var 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" /><href="#" id="baidu">百度</a>&nbsp|&nbsp<href="#" id="youku">优酷</a><br />
<div style="overflow:hidden"><iframe id="up" class="show" frameborder="0" ></iframe></div>
</body>
</html>

 

posted @ 2011-06-29 21:02  草珊瑚  阅读(3004)  评论(22编辑  收藏  举报