1 <!DOCTYPE html>
2 <html lang=
"en">
3 <head>
4 <meta charset=
"UTF-8">
5 <title></title>
6 <style>
7 *
{
8 margin:
0;
9 padding:
0;
10 }
11
12 #wrap {
13 width: 400px;
14 margin: 50px auto;
15 }
16
17 #wrap input {
18 width: 380px;
19 height: 38px;
20 border: #
000 1px solid;
21 padding:
0 9px;
22 }
23
24 #wrap ul {
25 border: #
000 1px solid;
26 width: 398px;
27 height: auto;
28 padding:
0;
29 overflow: hidden;
30 }
31
32 #wrap ul li {
33 list-
style: none;
34 width: 380px;
35 padding:
0 9px;
36 height: 30px;
37 border-bottom: #
999 1px solid;
38 line-
height: 30px;
39 }
40
41 #wrap ul li.on {
42 background: #c00;
43 color: #fff;
44 }
45 </style>
46 <script>
47 function jsonP(json) {
48 if (!
json.url) {
49 alert(
'请输入正确的请求路径');
50 return;
51 }
52 json.data = json.data ||
{};
53 json.cbName = json.cbName ||
'cb';
54 var fnName =
'show' +
Math.random();
55 fnName = fnName.replace(
'.',
'');
56 window[fnName] =
function (json2) {
57 json.success &&
json.success(json2);
58 oHead.removeChild(oScript);
59 };
60 json.data[json.cbName] =
fnName;
61 var arr =
[];
62 for (
var name
in json.data) {
63 arr.push(name +
'=' +
json.data[name]);
64 }
65 var oScript = document.createElement(
'script');
66 oScript.src = json.url +
'?' + arr.join(
'&');
67 var oHead = document.getElementsByTagName(
'head')[
0];
68 oHead.appendChild(oScript);
69 }
70 window.onload =
function () {
71 var oTxt = document.getElementById(
'txt');
72 var oBox = document.getElementById(
'box');
73 var iNow = -
1;
74 var oldValue;
75 oTxt.onkeyup =
function (ev) {
76 var oEvent = ev ||
event;
77 if(oEvent.keyCode !=
40 && oEvent.keyCode !=
38 && oEvent.keyCode !=
13){
78 jsonP({
79 url:
'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
80 data: {
81 wd: oTxt.value
82 },
83 success: function (json) {
84 var arr =
json.s;
85 for (
var i =
0; i < arr.length; i++
) {
86 var oLi = document.createElement(
'li');
87 oLi.innerHTML =
arr[i];
88 oBox.appendChild(oLi);
89 }
90 var aLi =
oBox.children;
91 for (
var i =
0; i < aLi.length; i++
) {
92 aLi[i].index =
i;
93 aLi[i].onmouseover =
function () {
94 iNow =
this.index;
95 for (
var i =
0; i < aLi.length; i++
) {
96 aLi[i].className =
'';
97 }
98 this.className =
'on';
99 oTxt.value =
this.innerHTML;
100 };
101 }
102 }
103 });
104 oldValue =
oTxt.value;
105 }
106 };
107
108 oTxt.onkeydown =
function (ev) {
109 var oEvent = ev ||
event;
110 var aLi =
oBox.children;
111 if(oEvent.keyCode ==
40){
112 iNow++
;
113 if(iNow ==
aLi.length){
114 iNow = -
1;
115 }
116
117 for(
var i =
0; i < aLi.length; i++
){
118 aLi[i].className =
'';
119 }
120 if(iNow == -
1){
121 oTxt.value =
oldValue;
122 }
else{
123 aLi[iNow].className =
'on';
124 oTxt.value =
aLi[iNow].innerHTML;
125 }
126 }
127 if(oEvent.keyCode ==
38){
128 iNow--
;
129 if(iNow == -
2)iNow = aLi.length -
1;
130 for(
var i =
0; i < aLi.length; i++
){
131 aLi[i].className =
'';
132 }
133 if(iNow == -
1){
134 oTxt.value =
oldValue;
135 }
else{
136 aLi[iNow].className =
'on';
137 oTxt.value =
aLi[iNow].innerHTML;
138 }
139 return false;
140 }
141 if(oEvent.keyCode ==
13){
142 window.open(
'https://www.baidu.com/s?wd=' +
oTxt.value);
143 }
144 }
145 }
146 </script>
147 </head>
148 <body>
149 <div id=
"wrap">
150 <input type=
"text" id=
"txt">
151 <ul id=
"box">
152
153 </ul>
154 </div>
155 </body>
156 </html>
