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

很常见的搜索框，很常用，总结一下，怕自己忘了,使用的是原生的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').οnkeyup=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);//遍历临时数组，动态创建lifor(var i = 0;i<tmpArray.length;i++){var liObj = document.createElement("li");//将tr添加到ulObj中
    ulObj.appendChild(liObj);//将临时数组中的数据添加到li中
    setinnerText(liObj,tmpArray[i]);}
}

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

转载于:https://www.cnblogs.com/ryze/p/ryze03.html

模糊查询（类似百度搜索框）相关推荐

vue实现搜索框搜索新增_基于Vue el-autocomplete 实现类似百度搜索框功能_含真_前端开发者...
效果图如下所示: 首先上代码让数据触手可及 class="inline-input search-input" v-model="searchContent" ...
类似百度搜索框实时搜索的实现
1.html代码 <input type="text" name="ProjectNumber" id="ProjectNumber" ...
html搜索框下拉怎么做,一步一步教你实现仿百度搜索框下拉效果（上）
最终效果(chrome 下): 搜索框下拉 demo 今天就来简单讲解下如何做这样一个类似百度搜索框的下拉效果. 1.html 以及 css 部分首先你得要有个输入框,这里我用了控件,其次当用户 ...
jQuery实现百度搜索框
最近项目需求,写了一个类似百度搜索框的功能. 把代码整理了一遍,然后分享出来给大家看看,如果有不对的地方请多指教. 实现效果使用的语言:html,css,JavaScript,jQuery 代码部分 ...
百度搜索框怎么用HTML做,百度搜索框的基本实现
百度首页搜索框是这样的一个基本形式,我们搜索框里输入字符时就能显示出一些有关的联想词,如图2所示图1.png 图2.png 那么今天我们来写一下这种效果,不算一模一样,大概相同吧,哈哈. 第一步:在 ...
仿百度搜索框–jQuery版本
仿百度搜索框–jQuery版本时维九月,序属三秋.此吾工作三个月之日,亦是吾重拾博客之时.一路坎坷走来,经历良多,收获甚多. 正题百度搜索框是企业开发中常用的一项功能,作为一个前端工作者,自然也是 ...
html怎么创百度搜索框,JS实现百度搜索框
本文实例为大家分享了JS实现百度搜索框的具体代码,供大家参考,具体内容如下实现原理向输入框动态输入时关键词,将当前关键词作为问号参数后面的值,因为要跨域使用百度的接口,所以通过 JSONP 跨域创 ...
Ajax实现百度搜索框自动提示功能
Ajax实现百度搜索框自动提示功能当你在搜索框内写入关键字时下拉框会匹配和你输入的关键字相匹配的信息文章目录 Ajax实现百度搜索框自动提示功能一.实现效果二.代码实现 1.前端页面 2.后端 ...
用jq实现仿百度搜索框
百度搜索框看似简单,但是涉及到了数据交互,如果能用vue来实现的话会简单很多,现在用jq模仿了一下,写的代码不是一般的多啊! 当然头部要引入jq了 html部分 <input type=&quo ...

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

模糊查询（类似百度搜索框）相关推荐

最新文章

热门文章