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{ width:645px; margin:10px auto; text-align:center; overflow:hidden; font-size:20px;}
9 #box img{ width:270px; height:129px;}
10 #t1{ width:540px; height:36px; line-height:36px; outline:none; text-indent:6px; font-size:20px;}
11 .s_btn {
12 outline:none;
13 width: 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{ width: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>
浙公网安备 33010602011771号