大佬教程收集整理的这篇文章主要介绍了自动完成的搜索框javascript实现，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
在很多需要搜索的网站,都会有一个自动完成的搜索框. 方便用户查找他们想要的搜索词. 帮助用户快速找到自己想要的结果. 这种方式是比较友好的. 所以是比较提倡使用的.
我们这次就来实现这一效果. 我们通过两篇文章来进行讲解. 首先我们来完成界面的设计布局.
界面的HTML结构,第一个少不了的是一个搜索框,第二个就是搜索的点击按钮.
这就是最简单的搜索框的设计. 那CSS代码怎么处理. 以前用得多的是使用float来进行处理,然后给搜索框一个边框,设置一个padding. 然后给按钮去除边框,设置一个背景. 这里我们使用flex布局方式. 这样更简便点. 不用考虑清除浮动效果.当然这里就要考虑兼容性问题了.
这时候我们继续往下考虑,如果用户输入了关键词,那就得显示一个列表的相关词语. 那这时候我们需要加入一个词语列表. 比如
我们将这行代码追加到.search的内容后面.然后设置CSS代码,我们设置他的最小宽度为.search宽度减去搜索按钮的宽度.这样就跟搜索框一样宽.
这得在CSS代码之前,将默认的一些浏览器样式清除.最后效果如下.
好了.下面我们完成JS的代码控制. 我们来分析下,其中的事件. 用户在输入框输入文字后,将输入的文字与后台数据做查询,查询到后返回给客户端,然后将返回的数据显示在数据列表下.
根据这个步骤,我们首先是获取输入框标签,给这个标签添加onkeyup事件
这里我们模拟一个后台数据,这里用数据来表示,然后加入一些数据
后台数据有了,事件也添加了. 这时候我们对数据进行处理了. 首先是获取用输入的数据,来然后与后台数据进行比较. 然后将比较后的数据保存在一个数据里面.
//获取输入框里匹配的数据
var srdata = [];
for (var i = 0; i < data.length; i++) {
console.log(data[i].indexOf(val))
if (val.trim().length > 0 && data[i].indexOf(val) > -1) {
srdata.push(data[i]);
}
}
}
继续往下分析,目前我们获取到后台查询到的数据后,那就得将这个数据显示给用户查看,这里我们显示在数据列表中.
//获取输入框里匹配的数据
var srdata = [];
for (var i = 0; i < data.length; i++) {
console.log(data[i].indexOf(val))
if (val.trim().length > 0 && data[i].indexOf(val) > -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";
}
//将搜索到的数据追加到显示数据列表,然后每一行加入点击事件,点击后将数据放入搜索框内,数据列表隐藏
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];
ele_a.onclick = function () {
self.value = this.textContent;
ele_datalist.style.visibility = "hidden";
}
ele_li.appendChild(ele_a);
ele_datalist.appendChild(ele_li);}
}
在添加数据到列表中时,我们首先对数据列表做初始化处理,避免重复数据的添加. 其次就是我们给数据列表的每一行添加了一个点击事件,数据列表隐藏.
在这里整个自动完成的搜索框就完成了.我们来测试下效果.
这里可能是录制软件问题,边框与它录制的背景颜色应该一样了. 边框不见了(⊙﹏⊙)b 以上就是JAVASCRIPT实现搜索框的自动完成效果，大家可以自己测试玩玩!
以上是大佬教程为你收集整理的自动完成的搜索框javascript实现全部内容，希望文章能够帮你解决自动完成的搜索框javascript实现所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。