使用js实现一个搜索提示框功能

　　介绍

本篇文章给大家分享的是有关使用js实现一个搜索提示框功能,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

首先写静态页面

& lt; div类=癱ontainer"比; 　　& lt; !——搜索框——比; 　　& lt;输入类型=皌ext"id=皊earch"/比; 　　& lt; !——动态提示的数据框liebia——比; 　　& lt; div id=癮lert"祝辞 　　& lt; ul> & lt;/ul> 　　& lt;/div> 　　& lt;/div>

CSS样式

 var搜索=美元(“# search");
　　var警报=美元(“# alert");
　　var alertUl=美元(“# alert> ul");//清空列表的方法
　　函数clearUl () {
　　美元alertUl.empty ();
　　}
　　
　　美元搜索
　　.bind (“input"、功能(){//清空列表
　　clearUl ();//获取到用户所输入的内容=https://www.yisu.com/zixun/$ var值(这).val ();//console.log(价值);//使用getJSON方法获取json数据
　　美元.getJSON(“数据/server4。json”功能(数据){//console.log(数据);//获取到json数据中值的名称
　　美元。每个(数据、功能(输入、obj) {//console.log (obj);
　　var=obj.name名称;//console.log(名称);
　　
　　如果(name.indexOf(值)>=0){//表示输入的内容在名字中存在
　　var valueArr=obj.value;//console.log (valueArr);
　　美元。每个(valueArr、功能(输入文本){//console.log(文本);//将数据添加到HTML页面
　　李alertUl.append美元(“<> ${文本} ');
　　});
　　}
　　});
　　});//将ul列表显示出来
　　美元的警觉。css(“显示”、“块”);
　　})
　　.bind(“模糊”,函数(){
　　美元的警觉。css(“显示”,“没有一个”);
　　});

实现效果

使用js实现一个搜索提示框功能

以上就是使用js实现一个搜索提示框功能,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注行业资讯频道。

使用js实现一个搜索提示框功能