JS实现联想自动补齐功能

  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>