Vue如何实现输入框新增搜索历史记录功能 - 行业资讯 - 肥雀云

　　介绍

这篇文章主要介绍了Vue如何实现输入框新增搜索历史记录功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。

Vue实现搜索显示历史搜索记录,采用插件存储

安装插件

,, <代码>,,npm安装存储- s

在本地新建cache.js文件,该文件是关于本地存储的逻辑处理(缓存到本地的数据最大缓存15条,并且新的插入在第一位,首先得到当前的存储数据情况,将关键字存到数组中,判断如果数组中有相同的数据,则把重复的数据删除,将新的关键字存入到前面)

缓存。js文件中的代码如下

/*把搜索的结果保存下来*/,/*用出口把方法暴露出来*/,/*定义存储搜索的key _search_定义内部使用的关键*/, 　　const SEARCH_KEY=& # 39; _search_& # 39;, 　　const SEARCH_MAX_LENGTH=15,/*插入方法,,,arr存储的数据,val传入存储的值,比较前后比较的函数,maxlen存入的最大值*/, 　　function insertArray (arr val,比较,maxlen) {,//findIndex才能()函数也是查找目标元素,找到就返回元素的位置,找不到就返回1只; 　　const 才能;指数=arr.findIndex(比较), 　　如果才能(指数===0){,//数据为数组中的第一个数据,不做任何操作, 　　,,,return , 　　,,}, 　　如果才能(index> 0){,//数组中有这条数据并且不再第一个位置, 　　,,,arr.splice(指数(1),//删掉这个数, 　　,,}, 　　arr.unshift才能(val);//把这条数据存储到数组中的第一个位置上, 　　如果才能(maxlen ,,, arr.length> maxlen) {, 　　,,,//如果有条数限制并且数组的个数大于限制数, 　　,,,arr.pop(),//方法将删除,arrayObject 的最后一个元素,把数组长度减,1,并且返回它删除的元素的值, 　　,,,, 　　,,}, 　　},//开源存储的库,对localstorage和sessionstorage的封装, 　　import storage 得到& # 39;good-storage& # 39;, 　　export function saveSearch(查询){, 　　let 才能搜索=storage.get (SEARCH_KEY, []),/*才能逻辑是最后一次搜索的结果放到搜索历史的第一个*/, 　　insertArray才能(搜索、查询(项)=祝辞{,,, 　　,,,return 项目===query //这是传入的一个比较函数,说明查询在这个数组中, 　　,,},SEARCH_MAX_LENGTH), 　　storage.set才能(SEARCH_KEY搜索), 　　return 才能;searches 　　}

在对应的组件中应用的方式:

& lt; template> 　　,& lt; div 类=皊earch"比; 　　& lt; !——,才能顶部搜索栏,——比; 　　& lt;才能div 类=癶eader"比; 　　,,& lt; div 类=癶ead-title title-style"在输入关键字& lt;/div> 　　,,& lt; div 类=癶ead-input"比; 　　,,,& lt;输入　　,,,,类型=皌ext" 　　,,,,ref=癷nputchange" 　　,,,,v模型=皏aluetext" 　　,,,,@keyup.enter=皁nSearch(真正的)“; 　　,,,,@keyup.tab=皁nSearch(真正的)“; 　　,,,,@focus=癷nitPage" 　　,,,,占位符=扒胧淙牍丶纸兴阉鳌? 　　,,,/比; 　　,,,& lt; div 类型=皌ext", @click=癱lear",类=癷nput-btn title-style"在清除& lt;/div> 　　,,& lt;/div> 　　　　,,& lt; div 类=癶istory-panel", v=? isFocus"比; 　　,,,& lt; div v=癶istoryxs"在搜索历史& lt;/div> 　　,,,& lt; div v=皊earches_list.length> 0“比; 　　,,,,& lt; ul 类=癶is_ulcon", v=癶istoryxs"比; 　　,,,,,& lt;李　　,,,,,,)=?项目、索引),拷贝searches_list" 　　,,,,,,:关键=癷ndex" 　　,,,,,,@click=癶istorysearch(项目)“; 　　,,,,,在{{项}}& lt;/li> 　　,,,,& lt;/ul> 　　,,,& lt;/div> 　　,,,& lt; div 类=癶istory-tips", v-else>暂无搜索记录! & lt;/div> 　　,,,& lt; p v=癶istoryxs", @click=癱learhis"在清空历史记录& lt;/p> 　　,,& lt;/div> 　　& lt;才能/div> 　　& lt;才能!,…,此处省略无关代码,——比; 　　　　& lt;才能!——,底部按钮,——比; 　　& lt;才能div 类=癴ooter title-style"比; 　　,,& lt; van-row> 　　,,,& lt; van-col 跨度=?2“比; 　　,,,,& lt; div 类=發eft", @click=皉esetData"在重置所选条件& lt;/div> 　　,,,& lt;/van-col> 　　,,,& lt; van-col 跨度=?2“比; 　　,,,,& lt; div 类=皉ight", @click=皁nSearch(真正的)“在立即搜索& lt;/div> 　　,,,& lt;/van-col> 　　,,& lt;/van-row> 　　& lt;才能/div> 　　,& lt;/div> 　　& lt;/template> 　　　　& lt; script 类型=拔谋?Babel"比; 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null