模糊查询（类似百度搜索框）

很常见的搜索框，很常用，总结一下，怕自己忘了,使用的是原生的js。

 这是原生写的，代码很简单，重要是思路。主要就是用了一个indexOf()，很简单。越简单的东西越难想到，很多人都会想到用正则去做，这样就舍近求远了。

html部分：

<div id="box">
    <input type="text" id="txt" value = "">
    <input type="button" id="btn" value="搜索">
</div>

javascript部分：

//创建假数据
var array=["aaa","abc","aab","acc","bcc","caa"];
// 判断id为pop的div是否存在如果存在应删除  ===========> 感谢 盛夏的永夜 的提醒
if (document.getElementById("pop")) {

　　divBox.removeChild(document.getElementById("pop"));

} 

//获取文本框注册keyup事件 document.getElementById('txt').onkeyup=function(){ var divBox = document.getElementById('box'); //临时数组 var tmpArray = []; //获取数据源中的每一条数据 for(var i=0;i<array.length;i++){ //找到以你输入的内容为开头的所有数据 if(array[i].indexOf(this.value) === 0){ //将找到的数据push到临时数组中  tmpArray.push(array[i]); } } //临时数组为空时，不新建显示框 if(tmpArray.length === 0){return;} //如果搜索框没有值时也不新建显示框 if(this.value.length === 0){ //如果此时已经有了显示框，应该除去 if(document.getElementById("pop")){ divBox.removeChild(document.getElementById("pop")); } return; } //临时数组有数据 var dvObj = document.creatElement("div"); dvObj.id = "pop"; //将div添加到box中  divBox.appendChild(dvObj); var ulObj=document.createElement("ul"); //将ul添加到dvObj中  dvObj.appendChild(ulObj); //遍历临时数组，动态创建li for(var i = 0;i<tmpArray.length;i++){ var liObj = document.createElement("li"); //将tr添加到ulObj中  ulObj.appendChild(liObj); //将临时数组中的数据添加到li中  setinnerText(liObj,tmpArray[i]); } }

 

css的样式没有写肯定会有问题，只能留给你们了，都写完了，就没意思了。我是一个喜欢留坑的人。