百度和优酷的搜索体验改善，类似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 >