1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 *{ margin:0; padding:0; list-style:none;} 8 #box{ 645px; margin:10px auto; text-align:center; overflow:hidden; font-size:20px;} 9 #box img{ 270px; height:129px;} 10 #t1{ 540px; height:36px; line-height:36px; outline:none; text-indent:6px; font-size:20px;} 11 .s_btn { 12 outline:none; 13 100px; 14 height: 40px; 15 float:right; 16 color: rgb(255, 255, 255); 17 font-size: 15px; 18 letter-spacing: 1px; 19 background: rgb(51, 133, 255); 20 border-bottom: 1px solid rgb(45, 120, 244); 21 -webkit-appearance: none; 22 border:none; 23 -webkit-border-radius: 0; 24 margin-left:1px; 25 cursor:pointer; 26 } 27 #box ul{ 542px; border:1px solid #ccc; border-top:none; text-align:left; text-indent:6px; display:none;} 28 #box ul li{ height:30px; line-height:30px; cursor:default;} 29 #box ul li.on{ background:#f0f0f0;} 30 </style> 31 <script src="jquery-1.7.2.js"></script> 32 <script> 33 $(function(){ 34 var oBox=$('#box'); 35 var oBtn=$('#btn1'); 36 var oTxt=$('#t1'); 37 var oUl=$('#ul1'); 38 var iNow=-1; 39 var oldValue=''; 40 var url='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su'; 41 oTxt.on('keyup',function(ev){ 42 if(ev.keyCode==38||ev.keyCode==40){ 43 return; 44 } 45 if(ev.keyCode==13){ 46 window.open('https://www.baidu.com/s?wd='+oTxt.val(),'_self'); 47 oTxt.val(''); 48 } 49 $.ajax({ 50 url:url, 51 data:{ 52 wd:oTxt.val() 53 }, 54 dataType:'jsonp', 55 jsonp:'cb', 56 timeout:5000, 57 success:function(json){ 58 var arr=json.s; 59 if(arr.length){ 60 oUl.css('display','block'); 61 }else{ 62 oUl.css('display','none'); 63 } 64 oUl.html(''); 65 $.each(arr,function(index){ 66 var oLi=document.createElement('li'); 67 $(oLi).html(arr[index]); 68 $(oLi).appendTo(oUl); 69 $(oLi).on('mouseover',function(){ 70 $.each(oUl.children(),function(t){ 71 oUl.children().eq(t).removeClass('on'); 72 }); 73 $(this).addClass('on'); 74 }); 75 $(oLi).on('mouseout',function(){ 76 $.each(oUl.children(),function(t){ 77 oUl.children().eq(t).removeClass('on'); 78 }); 79 }); 80 $(oLi).on('click',function(){ 81 window.open('https://www.baidu.com/s?wd='+$(this).html(),'_self'); 82 oTxt.val(''); 83 }); 84 }); 85 }, 86 error:function(){ 87 alert('网络异常，请重新输入'); 88 89 } 90 }); 91 oldValue=oTxt.val(); 92 }); 93 oBtn.on('click',function(){ 94 window.open('https://www.baidu.com/s?wd='+oTxt.val(),'_self'); 95 oTxt.val(''); 96 }); 97 oTxt.on('keydown',function(ev){ 98 var aLi=$('li'); 99 switch(ev.keyCode){ 100 case 40: 101 iNow++; 102 if(iNow==aLi.length){iNow=-1}; 103 $.each(aLi,function(index){ 104 aLi.eq(index).removeClass('on'); 105 }); 106 if(iNow==-1){ 107 oTxt.val(oldValue); 108 }else{ 109 aLi.eq(iNow).addClass('on'); 110 oTxt.val(aLi.eq(iNow).html()); 111 } 112 break; 113 case 38: 114 iNow--; 115 if(iNow==-2){iNow=aLi.length-1}; 116 $.each(aLi,function(index){ 117 aLi.eq(index).removeClass('on'); 118 }); 119 if(iNow==-1){ 120 oTxt.val(oldValue); 121 }else{ 122 aLi.eq(iNow).addClass('on'); 123 oTxt.val(aLi.eq(iNow).html()); 124 } 125 break; 126 } 127 128 }); 129 }); 130 </script> 131 </head> 132 133 <body> 134 <div id="box"> 135 <img src="https://www.baidu.com/img/bd_logo1.png"><br> 136 <input type="text" id="t1"><input type="submit" id="btn1" value="百度一下" class="bg s_btn"> 137 <ul id="ul1"> 138 <!--<li class="on">1111</li>--> 139 <!--<li>1111</li>--> 140 <!--<li>1111</li>--> 141 <!--<li>1111</li>--> 142 </ul> 143 </div> 144 </body> 145 </html>