<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin:0; padding:0; list-style:none;} #box{ 645px; margin:10px auto; text-align:center; overflow:hidden; font-size:20px;} #box img{ 270px; height:129px;} #t1{ 540px; height:36px; line-height:36px; outline:none; text-indent:6px; font-size:20px;} .s_btn { outline:none; 100px; height: 40px; float:right; color: rgb(255, 255, 255); font-size: 15px; letter-spacing: 1px; background: rgb(51, 133, 255); border-bottom: 1px solid rgb(45, 120, 244); -webkit-appearance: none; border:none; -webkit-border-radius: 0; margin-left:1px; cursor:pointer; } #box ul{ 542px; border:1px solid #ccc; border-top:none; text-align:left; text-indent:6px; display:none;} #box ul li{ height:30px; line-height:30px; cursor:default;} #box ul li.on{ background:#f0f0f0;} </style> <script src="jquery-1.7.2.js"></script> <script> $(function(){ var oBox=$('#box'); var oBtn=$('#btn1'); var oTxt=$('#t1'); var oUl=$('#ul1'); var iNow=-1; var oldValue=''; var url='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su'; oTxt.on('keyup',function(ev){ if(ev.keyCode==38||ev.keyCode==40){ return; } if(ev.keyCode==13){ window.open('https://www.baidu.com/s?wd='+oTxt.val(),'_self'); oTxt.val(''); } $.ajax({ url:url, data:{ wd:oTxt.val() }, dataType:'jsonp', jsonp:'cb', timeout:5000, success:function(json){ var arr=json.s; if(arr.length){ oUl.css('display','block'); }else{ oUl.css('display','none'); } oUl.html(''); $.each(arr,function(index){ var oLi=document.createElement('li'); $(oLi).html(arr[index]); $(oLi).appendTo(oUl); $(oLi).on('mouseover',function(){ $.each(oUl.children(),function(t){ oUl.children().eq(t).removeClass('on'); }); $(this).addClass('on'); }); $(oLi).on('mouseout',function(){ $.each(oUl.children(),function(t){ oUl.children().eq(t).removeClass('on'); }); }); $(oLi).on('click',function(){ window.open('https://www.baidu.com/s?wd='+$(this).html(),'_self'); oTxt.val(''); }); }); }, error:function(){ alert('网络异常，请重新输入'); } }); oldValue=oTxt.val(); }); oBtn.on('click',function(){ window.open('https://www.baidu.com/s?wd='+oTxt.val(),'_self'); oTxt.val(''); }); oTxt.on('keydown',function(ev){ var aLi=$('li'); switch(ev.keyCode){ case 40: iNow++; if(iNow==aLi.length){iNow=-1}; $.each(aLi,function(index){ aLi.eq(index).removeClass('on'); }); if(iNow==-1){ oTxt.val(oldValue); }else{ aLi.eq(iNow).addClass('on'); oTxt.val(aLi.eq(iNow).html()); } break; case 38: iNow--; if(iNow==-2){iNow=aLi.length-1}; $.each(aLi,function(index){ aLi.eq(index).removeClass('on'); }); if(iNow==-1){ oTxt.val(oldValue); }else{ aLi.eq(iNow).addClass('on'); oTxt.val(aLi.eq(iNow).html()); } break; } }); }); </script> </head> <body> <div id="box"> <img src="https://www.baidu.com/img/bd_logo1.png"><br> <input type="text" id="t1"><input type="submit" id="btn1" value="百度一下" class="bg s_btn"> <ul id="ul1"> <!--<li class="on">1111</li>--> <!--<li>1111</li>--> <!--<li>1111</li>--> <!--<li>1111</li>--> </ul> </div> </body> </html>