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>