jquery 百度搜索

  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>