模糊查询(类似百度搜索框)

Posted 刘小北~!

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了模糊查询(类似百度搜索框)相关的知识,希望对你有一定的参考价值。

很常见的搜索框,很常用,总结一下,怕自己忘了,使用的是原生的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的样式没有写肯定会有问题,只能留给你们了,都写完了,就没意思了。我是一个喜欢留坑的人。

 

以上是关于模糊查询(类似百度搜索框)的主要内容,如果未能解决你的问题,请参考以下文章

制作一个类似于百度搜索的事件代码

JavaScript根据Json数据来做的模糊查询功能

搜索框实现模糊查询方法 - js

java如何实现异步模糊查询

谁有多选下拉列表含模糊搜索功能的js组件,谢谢

如何使用AS3,实现百度模糊查询提示那样。