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

1.基本布局：

div class=' searcher ' p class=' searcher-main ' iimg src=' http : img/icon/icon-search-map。png '/I输入类=' searcher-text '占位符='请输入档口名称/input/p p class=' searcher-cancel '取消/p/div这里涉及一个问题如何将搜索图标放入投入中，网上有相关资料不做赘述：搜索器{ background: rgba(255，255，255，0)；位置：固定；z指数： 999；宽度： 100%;高度： 6rem文本对齐：中心；font-size : 1.6 rem} .搜索器-主{背景： # F4F 4；绝对位置：左侧： 50%;top: 1.2rem左边距：-45%;边界半径： 1.6雷姆；宽度： 80%;高度： 3毫米线高： 3re m；} .搜索-文本{宽度： 80%；文本对齐：中心；border:无；大纲：无；背景： # F4F 4；} .搜索器-取消{位置：绝对；宽度： 10%;高度： 3毫米线高： 3re m；color : # 929292 top : 1.2 remright : 1 rem } 2。步骤1:

3.js部分

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

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

//监听投入框，实时渲染$('.搜索者-文本')。on('input '，function(){ initSearchList()；});JQ一般都是用这种=html的方法，虽然累赘不过通过全球资源定位器(统一资源定位符)或者标签标签里属性传参较容易理解。

//渲染搜索列表函数initSearchList() { var List=$(').searcher-land ul’)；var params={ }；//搜索过滤字符var SEARCH_KEY=$(' .搜索者-文本')。val()参数[' 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。日志(结果)；控制台。日志(TYPE)var html=' '；名单。html(" ")；//有结果if(result.data.length 0) { $ .每个(result.data，function(index，value){ good name=value[' good _ name ']；商店名称=值[' shop _ name ']；//判断名字类型itemName=(goodName)？good name : shopNameHTMl=' Li class='商品-列表' ' Itemname '/Li ' })；$('.搜索者列表')。html(html)；} //无结果else { html='div class='no-goods '暂时无法找到此选项~/div '；$('.搜索者列表')。html(html)；} });}注意这里有一个replaceIllegalStr()方法，类似正则，目的是过滤掉一些无用的符号以免给后端接收数据带来不必要的麻烦。

函数replaceIllegalStr(str){ var reg；var invalid _ list=['/'，' \ '，'['，']'，' { '，' } ','','','<','>','','',':',';'、""、""、""、'^'、""、""、"r"、"rn"、"\n"、" n "]；for(var I=0；我非法_ list.lengthi ) { if (str.indexOf(非法_list[i])=0) { if(非法_list[i]=='\' ||非法_ list[I]='['){ reg=new RegExp(' '非法_ list[I]，' g ')；} else { reg=new RegExp(非法_list[i]，' g '；} str=str.replace(reg，")；} }返回字符串。trim()；}4 .步骤2:

5.缓存

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

//设置缓存epm.setLocalItem=函数（键，值){ if(window。本地存储){本地存储。SetItem(键，值);} else { //后备方案setCookie(键，值);} };//提取缓存EPM。getLocalItem=function(key){ if(window。本地存储){返回本地存储。GetItem(键)；} else { //后备方案返回getCookie(密钥);} };//删除缓存EPM。removeLocalItem=函数(键){ if(窗口。本地存储){本地存储。移除项目(键)；} else { //后备方案removeCookie(密钥);} };

6 .步骤3

得到点击的相应的缓存词里的价值，再次发送ajax:

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。