事件逻辑：
1.用户在输入框输入文字后
obj.onkeyup = function (e) { }
2.将输入的文字与后台数据做查询
for (var i = 0; i < data.length; i++) { //indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。检索val if (val.trim().length > 0 && data[i].indexOf(val) > -1) {//val.trim()两端去空格处理 //如果要检索的字符串值没有出现，则该方法返回 -1。 srdata.push(data[i]); } }
.push()
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
3.查询到后返回给客户端
//获取到的数据准备追加显示, 前期要做的事情: 清空数据,然后显示数据列表 var ele_datalist = document.getElementById("datalist"); ele_datalist.style.visibility = "visible"; ele_datalist.innerHTML = ""; //如果获取到的数据为空,则不显示 if (srdata.length == 0) { ele_datalist.style.visibility = "hidden"; }
4.然后将返回的数据显示在数据列表下
ele_li.appendChild(ele_a);
ele_datalist.appendChild(ele_li);
完整案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .search { display: inline-flex; height: 35px; margin: 50px auto; position: relative; } .search input { border: #eee 1px solid; background-color: #fff; outline: none; width: 200px; padding: 0 5px; } .search button { background-color: #ff3300; color: #fff; border: none; width: 80px; } /*显示列表*/ .search ul { position: absolute; left: 0; top: 35px; border: #eee 1px solid; min-width: calc(100% - 80px); text-align: left; visibility: hidden; } .search ul a { display: block; padding: 5px; } </style> </head> <body> <div class="search"> <input type="text" value="" id="key"> <button>搜索</button> <ul id="datalist"> <!--<li><a href="#">武林外传</a> </li>--> <!--<li><a href="#">葵花宝典</a> </li>--> <!--<li><a href="#">如来佛掌</a> </li>--> <!--<li><a href="#">九阴白骨爪</a> </li>--> </ul> </div> </body> </html> <script type="text/javascript"> //定义一些数据 var data = ["15057187176", "15057187175", "15057187174", "15057187173", "武林江湖", "will"]; var ele_key = document.getElementById("key"); ele_key.onkeyup = function (e) { var val = this.value; console.log(val); //获取输入框里匹配的数据 var srdata = []; for (var i = 0; i < data.length; i++) { console.log(data[i].indexOf(val)) //indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。检索val if (val.trim().length > 0 && data[i].indexOf(val) > -1) {//val.trim()两端去空格处理 //如果要检索的字符串值没有出现，则该方法返回 -1。 srdata.push(data[i]); } } //获取到的数据准备追加显示, 前期要做的事情: 清空数据,然后显示数据列表 var ele_datalist = document.getElementById("datalist"); ele_datalist.style.visibility = "visible"; ele_datalist.innerHTML = ""; //如果获取到的数据为空,则不显示 if (srdata.length == 0) { ele_datalist.style.visibility = "hidden"; } //1.将搜索到的数据追加到显示数据列表, , , var self = this; for (var i = 0; i < srdata.length; i++) { var ele_li = document.createElement("li"); var ele_a = document.createElement("a"); ele_a.setAttribute("href", "javascript:;"); ele_a.textContent = srdata[i]; //2.然后每一行加入点击事件 ele_a.onclick = function () { //3.点击后将数据放入搜索框内 self.value = this.textContent; //4.数据列表隐藏 ele_datalist.style.visibility = "hidden"; } ele_li.appendChild(ele_a); ele_datalist.appendChild(ele_li); } } </script>