1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta charset = "utf-8">
5 <title>JS实现联想自动补齐功能</title>
6 <style>
7 * { box-sizing: border-box; }
8 #container{
9
10 position:relative;
11 top:50px;
12 left:30%;
13 /*为了好看一点定个位*/
14
15 }
16 form{
17 padding:6px;
18 position:absolute;
19 top:200px;
20 left:50px;
21 }
22 #search{
23 border: 1px solid transparent;
24 background-color: #f1f1f1;
25 padding: 10px;
26 font-size: 16px;
27 }
28 button{
29 background-color: DodgerBlue;
30 color: #fff;
31 width:60px;
32 height:40px;
33 padding:10px;
34 }
35 //好了虽然丑了点，更能还是有了
36 .listclass {
37 position: absolute;
38 border: 1px solid #d4d4d4;
39 border-bottom: none;
40 border-top: none;
41 z-index: 99;
42
43 top: 100%;
44 left: 0;
45 right: 0;
46 }
47 .listclass div {
48 padding: 10px;
49 cursor: pointer;
50 background-color: #fff;
51 border-bottom: 1px solid #d4d4d4;
52 }
53 .listclass div:hover {
54
55 background-color: #e9e9e9;
56 }
57 .listactive {
58
59 background-color: DodgerBlue !important;
60 color: #ffffff;
61 }
62 </style>
63 </head>
64 <body>
65 <div id="container">
66 <h3>HTML5的表单是有自动不全功能的，（所以可以只做输入和数据对比过滤就可以）<h3>
67 <h3>这里我们先把补齐更能关闭了用autocomplete属性来实现</h3>
68 <form autocomplete="off" action="https://www.baidu.com/s?" id>
69
70 <div >
71 <input id="search" name="search" placeholder="输入国家或者地区的英文名">
72 <button type="submit" >提交</button>
73 </div>
74
75 </form>
76 </div>
77 <script>
78 //筛选函数
79 function search(arr){
80 //将数据传入，预处理一下
81
82 var currentFocus;//用来计算输入几个
83 var inp=document.getElementById("search");
84 //当输入时，开始筛选,注册一个输入
85 inp.addEventListener("input",function(event){
86 var a,b,i,val=this.value;
87 //当失去焦点后关闭下拉列表
88 closeAll();
89 if(!val){return false;}
90 currentFocus=-1;
91 //把数据例表搞出来
92 a=document.createElement("div");
93 a.setAttribute("id",this.id+"list");
94 a.setAttribute("class","listclass");
95 //添加这个div
96 inp.parentNode.appendChild(a);
97 //开始循环匹配数据
98 for(i=0;i<arr.length;i++){
99 //这个只能顺序匹配，匹配第一个后第二个有效继续，无效为空，
100 if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
101 b = document.createElement("div");
102 b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
103 b.innerHTML += arr[i].substr(val.length);
104 b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
105 b.addEventListener("click", function(e) {
106
107 inp.value = this.getElementsByTagName("input")[0].value;
108 console.log(this)
109 closeAll();
110 });
111 a.appendChild(b);
112 }
113 }
114 });
115 //按键按下时将数据放到输入框
116 inp.addEventListener("keydown", function(e) {
117 var x = document.getElementById(this.id + "list");
118 if (x) x = x.getElementsByTagName("div");
119 if (e.keyCode == 40) {
120 currentFocus++;
121 addActive(x);
122 } else if (e.keyCode == 38) {
123 currentFocus--;
124 addActive(x);
125 } else if (e.keyCode == 13) {
126 e.preventDefault();
127 if (currentFocus > -1) {
128
129 if (x) x[currentFocus].click();
130 }
131 }
132 });
133 function addActive(x) {
134
135 if (!x) return false;
136
137 removeActive(x);
138 if (currentFocus >= x.length) currentFocus = 0;
139 if (currentFocus < 0) currentFocus = (x.length - 1);
140
141 x[currentFocus].classList.add("listactive");
142 }
143 //输入框删除已经输入的字符，往后匹配
144 function removeActive(x) {
145
146 for (var i = 0; i < x.length; i++) {
147 x[i].classList.remove("listactive");
148 }
149 }
150 //失去焦点就关闭列表
151 function closeAll(elmnt) {
152 //全部删去
153 var x = document.getElementsByClassName("listclass");
154 for (var i = 0; i < x.length; i++) {
155 if (elmnt != x[i] && elmnt != inp) {
156 x[i].parentNode.removeChild(x[i]);
157 }
158 }
159 }
160 //点击列表外也删除
161 document.addEventListener("click", function (e) {
162 closeAll(e.target);
163 });
164
165
166 }
167
168 //数据
169 var countries = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua &
170
171 Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bang
172
173 ladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia &
174
175 Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei","Bulgaria","Burkina
176
177 Faso","Burundi","Cambodia","Cameroon","Canada","Cape Verde","Cayman Islands","Central Arfrican
178
179 Republic","Chad","Chile","China","Colombia","Congo","Cook Islands","Costa Rica","Cote D
180
181 Ivoire","Croatia","Cuba","Curacao","Cyprus","Czech
182
183 Republic","Denmark","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt","El
184
185 Salvador","Equatorial Guinea","Eritrea","Estonia","Ethiopia","Falkland Islands","Faroe
186
187 Islands","Fiji","Finland","France","French Polynesia","French West
188
189 Indies","Gabon","Gambia","Georgia","Germany","Ghana","Gibraltar","Greece","Greenland","Grenada","Gu
190
191 am","Guatemala","Guernsey","Guinea","Guinea Bissau","Guyana","Haiti","Honduras","Hong Kong
192
193 China","Hungary","Iceland","India","Indonesia","Iran","Iraq","Ireland","Isle of
194
195 Man","Israel","Italy","Jamaica","Japan","Jersey","Jordan","Kazakhstan","Kenya","Kiribati","Kosovo",
196
197 "Kuwait","Kyrgyzstan","Laos","Latvia","Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithua
198
199 nia","Luxembourg","Macau
200
201 China","Macedonia","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Marshall
202
203 Islands","Mauritania","Mauritius","Mexico","Micronesia","Moldova","Monaco","Mongolia","Montenegro",
204
205 "Montserrat","Morocco","Mozambique","Myanmar","Namibia","Nauro","Nepal","Netherlands","Netherlands
206
207 Antilles","New Caledonia","New Zealand","Nicaragua","Niger","Nigeria","North
208
209 Korea","Norway","Oman","Pakistan","Palau","Palestine","Panama","Papua New
210
211 Guinea","Paraguay","Peru","Philippines","Poland","Portugal","Puerto
212
213 Rico","Qatar","Reunion","Romania","Russia","Rwanda","Saint Pierre & Miquelon","Samoa","San
214
215 Marino","Sao Tome and Principe","Saudi Arabia","Senegal","Serbia","Seychelles","Sierra
216
217 Leone","Singapore","Slovakia","Slovenia","Solomon Islands","Somalia","South Africa","South
218
219 Korea","South Sudan","Spain","Sri Lanka","St Kitts & Nevis","St Lucia","St
220
221 Vincent","Sudan","Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan
222
223 China","Tajikistan","Tanzania","Thailand","Timor L'Este","Togo","Tonga","Trinidad &
224
225 Tobago","Tunisia","Turkey","Turkmenistan","Turks & Caicos","Tuvalu","Uganda","Ukraine","United Arab
226
227 Emirates","United Kingdom","United States of America","Uruguay","Uzbekistan","Vanuatu","Vatican
228
229 City","Venezuela","Vietnam","Virgin Islands (US)","Yemen","Zambia","Zimbabwe"];
230
231 /*运行一下函数*/
232 search(countries);
233 </script>
234 </body>
235 </html>
浙公网安备 33010602011771号