1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style> 8 li:hover { 9 background: gray; 10 } 11 12 .gray { 13 background: gray; 14 } 15 </style> 16 </head> 17 18 <body> 19 20 <!-- 21 当input获取焦点， 22 1、弹出建议条目。 OK 23 2、键盘上下选取 OK 24 3、回车可以开始搜索 OK 25 4、录入你想要的、展示：包含你搜索词的信息几条。 ok 26 5、热搜词：两个超级链接 27 获取焦点消失，失去焦点出现，超级链接。 28 渐变效果.. 29 30 --> 31 美观性： 32 <form action="a.php"> 33 <input autocomplete="off" type="text" name="str" /> 34 <ul id="mydata"> 35 36 </ul> 37 </form> 38 39 <script> 40 var myinput = document.querySelector("input") 41 var mydata = document.querySelector("#mydata") 42 var data = ['小米6', '小米5', '红米3', '手环', '手铐', '移动电影'] 43 var lis = ""; 44 45 function showList() { 46 var str = "" 47 for(var i = 0; i < data.length; i++) { 48 str += "<li>" + data[i] + "</li>"; 49 } 50 51 mydata.innerHTML = str; 52 53 //给li绑定单击事件 54 lis = document.querySelectorAll("#mydata li"); 55 console.log(lis) 56 for(var i = 0; i < lis.length; i++) { 57 lis[i].onclick = function() { 58 myinput.value = this.innerText; 59 //myinput.parentNode.submit(); 表单自动提交 60 61 } 62 } 63 64 } 65 66 myinput.onfocus = showList; 67 68 //有能力获取键盘事件？ 69 var k = -1; 70 myinput.onkeydown = function(ev) { 71 72 if(ev.keyCode == 40) { 73 ++k; 74 75 k = k >= lis.length - 1 ? lis.length - 1 : k; 76 //去掉非当前的背景class. 77 (k >= 1) ? (lis[k - 1].className = "") : null 78 if(k == 0) { 79 lis[lis.length - 1].className = "" 80 } 81 //给当前li添加背景 82 lis[k].className = "gray"; 83 myinput.value = lis[k].innerText; 84 85 } else if(ev.keyCode == 38) { 86 k = (k <= 0) ? 0 : --k; 87 88 if(k < (lis.length - 1)) { 89 lis[k + 1].className = ""; 90 } 91 92 lis[k].className = "gray"; 93 myinput.value = lis[k].innerText; 94 95 } 96 97 } 98 99 //获取用户输入显示相关内容 100 myinput.oninput = showList2; 101 102 function showList2(ev) { 103 //获取用户输入内容 104 var inputValue = this.value; 105 106 var str = "" 107 for(var i = 0; i < data.length; i++) { 108 if(data[i].indexOf(inputValue) > -1) { 109 str += "<li>" + data[i] + "</li>"; 110 } 111 } 112 mydata.innerHTML = str; 113 114 //给li绑定单击事件 115 lis = document.querySelectorAll("#mydata li"); 116 console.log(lis) 117 for(var i = 0; i < lis.length; i++) { 118 lis[i].onclick = function() { 119 myinput.value = this.innerText; 120 121 } 122 } 123 124 } 125 </script> 126 127 </body> 128 129 </html>