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 400px; 14 margin: 50px auto; 15 } 16 17 #wrap input { 18 380px; 19 height: 38px; 20 border: #000 1px solid; 21 padding: 0 9px; 22 } 23 24 #wrap ul { 25 border: #000 1px solid; 26 398px; 27 height: auto; 28 padding: 0; 29 overflow: hidden; 30 } 31 32 #wrap ul li { 33 list-style: none; 34 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>