Vue实现输入框新增搜索历史记录功能_vue3输入框自动联想和/联想 - CSDN文库

69 浏览量更新于2023-05-03 评论收藏 75KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

Vue 实现输入框新增搜索历史记录功能实现输入框新增搜索历史记录功能

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)

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余4页未读，立即下载

评论0

weixin_38586118

粉丝: 6
资源: 922

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈