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

Posted 2020-08-31 刘小北~！

很常见的搜索框，很常用，总结一下，怕自己忘了,使用的是原生的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"];
//获取文本框注册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 trObj = document.createElement("tr");
    //将tr添加到ulObj中
    ulObj.appendChild(liObj);
    //将临时数组中的数据添加到li中
    setinnerText(liObj,tmpArray[i]);
  }
}

 

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