转载: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 >   |   < a href ="#" id ="youku" > 优酷 </ a >< br />
< div style ="overflow:hidden" >< iframe id ="up" class ="show" frameborder ="0" ></ iframe ></ div >
</ body >
</ html >
< 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 >   |   < a href ="#" id ="youku" > 优酷 </ a >< br />
< div style ="overflow:hidden" >< iframe id ="up" class ="show" frameborder ="0" ></ iframe ></ div >
</ body >
</ html >