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 相关文章推荐
有关DOM元素与事件的3个谜题
Nov 11 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
Feb 02 Javascript
js改变鼠标的形状和样式的方法
Mar 31 Javascript
Javascript中的Callback方法浅析
Mar 15 Javascript
JavaScript获取function所有参数名的方法
Oct 30 Javascript
Bootstrap源码解读网格系统(3)
Dec 22 Javascript
通过AngularJS实现图片上传及缩略图展示示例
Jan 03 Javascript
JS改变页面颜色源码分享
Feb 24 Javascript
layui radio性别单选框赋值方法
Aug 15 Javascript
Vue.js 十五分钟入门图文教程
Sep 12 Javascript
nodemon实现Typescript项目热更新的示例代码
Nov 19 Javascript
js实现飞机大战游戏
Aug 26 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 xml文件操作代码(一)
2009/03/20 PHP
PHP实现HTML页面静态化的方法
2015/11/04 PHP
jQuery select控制插件
2009/08/17 Javascript
JQuery 绑定事件时传递参数的实现方法
2009/10/13 Javascript
学习面向对象之面向对象的基本概念:对象和其他基本要素
2010/11/30 Javascript
解析Javascript小括号“()”的多义性
2013/12/03 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
node.js超时timeout详解
2014/11/26 Javascript
jQuery内容过滤选择器用法分析
2015/02/10 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
2015/03/13 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
基于jquery实现日历签到功能
2020/09/11 Javascript
JS功能代码集锦
2016/05/04 Javascript
jQ处理xml文件和xml字符串的方法(详解)
2016/11/22 Javascript
解析jquery easyui tree异步加载子节点问题
2017/03/08 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
2018/08/01 Javascript
浅谈Python程序与C++程序的联合使用
2015/04/07 Python
在Django中创建第一个静态视图
2015/07/15 Python
Python实现定时备份mysql数据库并把备份数据库邮件发送
2018/03/08 Python
pandas获取groupby分组里最大值所在的行方法
2018/04/20 Python
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
python爬取指定微信公众号文章
2018/12/20 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
python 中的[:-1]和[::-1]的具体使用
2020/02/13 Python
HTML5 本地存储 LocalStorage详解
2016/06/24 HTML / CSS
英国最大的纸工艺品商店:CraftStash
2018/12/01 全球购物
英国健身超市:Fitness Superstore
2019/06/17 全球购物
德国BA保镖药房中文网:Bodyguard Apotheke
2021/03/09 全球购物
网上常见的一份Linux面试题(多项选择部分)
2014/09/09 面试题
旷课检讨书大全
2014/01/21 职场文书
物流专员岗位职责
2014/02/17 职场文书
运动员获奖感言
2014/08/15 职场文书
毕业实习感受与体会
2015/05/26 职场文书
学习焦裕禄观后感
2015/06/09 职场文书
大学生创业计划书常用模板
2019/08/07 职场文书