Vue如何实现输入框新增搜索历史记录功能
这篇文章主要介绍了Vue如何实现输入框新增搜索历史记录功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
10年积累的成都网站设计、成都做网站、外贸网站建设经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计后付款的网站建设流程,更有临江免费网站建设让你可以放心的选择与我们合作。
vue实现搜索显示历史搜索记录,采用插件-good-storage
安装插件
npm install good-storage -S
在本地新建cache.js文件,该文件是关于本地存储的逻辑处理(缓存到本地的数据最大缓存15条,并且新的插入在第一位,首先得到当前的存储数据情况,将关键字存到数组中,判断如果数组中有相同的数据,则把重复的数据删除,将新的关键字存入到前面)
cache.js 文件中的代码如下
/*把搜索的结果保存下来*/ /*用export把方法暴露出来*/ /*定义存储搜索的key _search_定义内部使用的key*/ const SEARCH_KEY='_search_' const SEARCH_MAX_LENGTH=15 /*插入方法 arr存储的数据 val传入存储的值 compare前后比较的函数 maxlen存入的最大值*/ function insertArray(arr,val,compare,maxlen){ //findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。 const index=arr.findIndex(compare) if(index===0){ //数据为数组中的第一个数据 不做任何操作 return } if(index>0){ //数组中有这条数据并且不再第一个位置 arr.splice(index,1) //删掉这个数 } arr.unshift(val);//把这条数据存储到数组中的第一个位置上 if(maxlen && arr.length>maxlen){ //如果有条数限制并且数组的个数大于限制数 arr.pop() //方法将删除 arrayObject 的最后一个元素,把数组长度减 1,并且返回它删除的元素的值 } } //开源storage的库,对localstorage和sessionstorage的封装 import storage from 'good-storage' export function saveSearch(query){ let searches=storage.get(SEARCH_KEY,[]) /*逻辑是最后一次搜索的结果放到搜索历史的第一个*/ insertArray(searches,query,(item)=>{ return item===query //这是传入的一个比较函数 说明query在这个数组中 },SEARCH_MAX_LENGTH) storage.set(SEARCH_KEY,searches) return searches }
在对应的组件中应用的方式:
输入关键字清除搜索历史0">
- {{item}}
暂无搜索记录!清空历史记录
重置所选条件 立即搜索
温馨提示:引入cache.js时你的文件路径要按照你自己的路径来 一 一对应
Vue的优点
Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和dom,可以大大提升访问速度和用户体验。
感谢你能够认真阅读完这篇文章,希望小编分享的“Vue如何实现输入框新增搜索历史记录功能”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!
网页名称:Vue如何实现输入框新增搜索历史记录功能
文章链接:http://ybzwz.com/article/iejjpj.html