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>
