JavaScript实现前端实时搜索功能


Posted in Javascript onMarch 26, 2020

大部分页面都具备搜索功能。而作为前端,我们的目的只是将用户输入的内容返回给后台而后呈现反馈数据给用户,具体实现如下:

1.基本布局:

<div class="searcher">
 <p class="searcher-main">
 <i><img src="img/icon/icon-search-map.png"/></i>
 <input class="searcher-text" placeholder="请输入档口名称"></input>
 </p>
 <p class="searcher-cancel">取消</p>
</div>

这里涉及一个问题如何将搜索图标放入input中,网上有相关资料不做赘述:

.searcher {
 background: rgba(255, 255, 255, 0);
 position: fixed;
 z-index: 999;
 width: 100%;
 height: 6rem;
 text-align: center;
 font-size: 1.6rem;
 }

 .searcher-main {
 background: #F4F4F4;
 position: absolute;
 left: 50%;
 top: 1.2rem;
 margin-left: -45%;
 border-radius: 1.6rem;
 width: 80%;
 height: 3rem;
 line-height: 3rem;
 } 

 .searcher-text {
 width: 80%;
 text-align: center;
 border: none;
 outline: none;
 background: #F4F4F4;
 }

 .searcher-cancel {
 position: absolute;
 width: 10%;
 height: 3rem;
 line-height: 3rem;
 color: #929292;
 top: 1.2rem;
 right: 1rem;
 }

2.step-1:

JavaScript实现前端实时搜索功能

3.js部分

这里要安利IE9以上的oninput事件

onchange事件只在键盘或者鼠标操作改变对象属性,且失去焦点时触发,脚本触发无效。
onkeydown/onkeypress/onkeyup在处理复制、粘贴、拖拽、长按键(按住键盘不放)等细节上并不完善。
onpropertychange不用考虑是否失去焦点,不管js操作还是键盘鼠标手动操作,只要HTML元素属性发生改变即可立即捕获到。遗憾的是,onpropertychange为IE专属的。

//监听input框,实时渲染
 $('.searcher-text').on('input', function() {
 initSearchList();
 });

JQ一般都是用这种+=html的方法,虽然累赘不过通过url或者tag标签里属性传参较容易理解。

//渲染搜索列表
 function initSearchList() {
 var List = $('.searcher-land ul');
 var params = {};
 //搜索过滤字符
 var SEARCH_KEY = $('.searcher-text').val()
 params['action'] = 'get_search_key_list';
 params['market_iid'] = 1001;
 params['search_type'] = TYPE;
 params['search_key'] = replaceIllegalStr(SEARCH_KEY);

 epm.ajax(params, function(result) {
 console.log(result);
 console.log(TYPE)
 var html = '';
 List.html('');
 //有结果
 if(result.data.length > 0) {
  $.each(result.data, function(index, value) {
  goodName = value['goods_name'];
  shopName = value['shop_name'];
  //判断Name类型
  itemName = (goodName) ? goodName : shopName;
  html += '<li class="goods-list">' + itemName + '</li>'
  });
  $('.searcher-list').html(html);
 }
 //无结果
 else {
  html = '<div class="no-goods">暂时无法找到此选项~</div>';
  $('.searcher-list').html(html);
 }
 });
 }

注意这里有一个replaceIllegalStr()方法,类似正则,目的是过滤掉一些无用的符号以免给后端接收数据带来不必要的麻烦。

function replaceIllegalStr(str) {
 var reg;
 var illegal_list = ["/", "\\",
 "[", "]",
 "{", "}",
 "<", ">",
 "<", ">",
 "「", "」",
 ":", ";",
 "、", "•",
 "^", "'", "\"",
 "\r", "\r\n", "\\n", "\n"];
 for (var i = 0; i < illegal_list.length; i++) {
 if (str.indexOf(illegal_list[i]) >= 0) {
 if (illegal_list[i] == '\\' || illegal_list[i] == '[') {
 reg = new RegExp('\\' + illegal_list[i], "g");
 } else {
 reg = new RegExp(illegal_list[i], "g");
 }
 str = str.replace(reg, '');
 }
 }
 return str.trim();
}

4.step-2:

JavaScript实现前端实时搜索功能

5.缓存

这里我们将点击的数据保存在本地缓存里,供取用呈现:
注: epm是自己封装的一个方法与属性的对象

//设置缓存
 epm.setLocalItem = function(key, value) {
 if (window.localStorage) {
 localStorage.setItem(key, value);
 } else {
 //后备方案
 setCookie(key, value);
 }
 };
//提取缓存
 epm.getLocalItem = function(key) {
 if (window.localStorage) {
 return localStorage.getItem(key);
 } else {
 //后备方案
 return getCookie(key);
 }
 };
//删除缓存
 epm.removeLocalItem = function(key) {
 if (window.localStorage) {
 localStorage.removeItem(key);
 } else {
 //后备方案
 removeCookie(key);
 }
 };

JavaScript实现前端实时搜索功能

6.step-3

得到点击的相应的缓存词里的value,再次发送ajax:

JavaScript实现前端实时搜索功能

更多搜索功能实现的精彩文章,请点击专题:javascript搜索功能汇总 进行学习

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 处理表单元素的代码
Feb 15 Javascript
基于Jquery制作的幻灯片图集效果打包下载
Feb 12 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
Dec 14 Javascript
jquery实现textarea 高度自适应
Mar 11 Javascript
快速使用Bootstrap搭建传送带
May 06 Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 Javascript
Bootstrap简单表单显示学习笔记
Nov 15 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
Jan 17 Javascript
浅谈在koa2中实现页面渲染的全局数据
Oct 09 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
Oct 15 Javascript
js变量值传到php过程详解 将php解析成数据
Jun 26 Javascript
JavaScript实现留言板案例
Mar 17 Javascript
用 js 的 selection range 操作选择区域内容和图片
Apr 18 #Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
Apr 18 #Javascript
Angularjs根据json文件动态生成路由状态的实现方法
Apr 17 #Javascript
微信小程序实战之轮播图(3)
Apr 17 #Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
Jun 19 #Javascript
微信小程序实战之上拉(分页加载)效果(2)
Apr 17 #Javascript
微信小程序教程系列之新建页面(4)
Apr 17 #Javascript
You might like
解析PHP高效率写法(详解原因)
2013/06/20 PHP
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
php去除字符串换行符示例分享
2014/02/13 PHP
详解PHP队列的实现
2019/03/14 PHP
js根据给定的日期计算当月有多少天实现思路及代码
2013/02/25 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
jquery显示隐藏元素的实现代码
2016/05/19 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
Angular 4.x 动态创建表单实例
2017/04/25 Javascript
Angular网络请求的封装方法
2018/05/22 Javascript
微信小程序实现聊天对话(文本、图片)功能
2018/07/06 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
vue+iview 兼容IE11浏览器的实现方法
2019/01/07 Javascript
vue.js中ref和$refs的使用及示例讲解
2019/08/14 Javascript
javscript 数组扁平化的实现
2020/02/03 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
[01:32]DOTA2 2015国际邀请赛中国区预选赛第四日战报
2015/05/29 DOTA
python获取指定网页上所有超链接的方法
2015/04/04 Python
Python使用Scrapy爬取妹子图
2015/05/28 Python
Python提取网页中超链接的方法
2016/09/18 Python
django文档学习之applications使用详解
2018/01/29 Python
Django权限机制实现代码详解
2018/02/05 Python
python:pandas合并csv文件的方法(图书数据集成)
2018/04/12 Python
Python实现的查询mysql数据库并通过邮件发送信息功能
2018/05/17 Python
python3之模块psutil系统性能信息使用
2018/05/30 Python
python如何求圆的面积
2020/07/01 Python
CSS3 Backgrounds属性相关介绍
2011/05/11 HTML / CSS
世界上最大的在线旅行社新加坡网站:Expedia新加坡
2016/08/25 全球购物
写给女生的道歉信
2014/01/08 职场文书
汽车销售员如何做职业生涯规划
2014/02/16 职场文书
食品安全责任书
2014/04/15 职场文书
拾金不昧通报表扬范文
2015/05/05 职场文书
2015秋学期开学寄语
2015/05/28 职场文书
部门主管竞聘书
2015/09/15 职场文书
财产分割协议书
2016/03/22 职场文书
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python