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