实现历史搜索,主要用到了 localStorage 储存
localStorage 可以长久保存整个网站的数据,保存的数据没有过期时间,直到手动去删除。
引入element的 autocomplete输入框 是一个可带输入建议的输入框组件
<template>
<div>
<el-autocomplete class="inline-input" v-model="state1" :fetch-suggestions="querySearch" placeholder="请输入内容"
@select="handleSelect" @keyup.native.enter='setIntoStorage'></el-autocomplete>
<el-button type="success" icon="el-icon-search" @click="setIntoStorage">查询</el-button>
</div>
</template>
fetch-suggestions 是一个返回输入建议的方法属性,根据输入的数据匹配合适的数据
@select 点击选中建议项时触发
@keyup.native.enter 双击事件
export default {
name: "userManagement",
data() {
return {
//建议的数组,这里可以看成历史数据的数组,这个数组不能为空,为空的话就会报错
restaurants: [
{
value:'',//必须项
code:''
}
],
state1: '',
}
},
created: function() {
// localStorage.removeItem('srcOrderNo') 清空缓存
// localStorage.removeItem('ReverseSort')
},
mounted() {},
methods: {
querySearch(queryString, cb) {
//如果有缓存值,那就给历史搜索的数组赋值
if(JSON.parse(localStorage.getItem('srcOrderNo'))){
this.restaurants=JSON.parse(localStorage.getItem('srcOrderNo'))
}
var restaurants = this.restaurants;
//根据输入的值与历史搜索的数组进行匹配
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
cb(results);
},
createFilter(queryString) {
return (restaurant) => {
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
//点击历史搜索的数据,获取到点击的数据
handleSelect(item) {
console.log(item);
},
//回车,点击事件
setIntoStorage() {
if (JSON.parse(localStorage.getItem('ReverseSort'))) { // 判断是否有 缓存值
var data=JSON.parse(localStorage.getItem('ReverseSort'))
//如果已经存在输入的值,那这个值的搜索次数加一
for(var i=0;i<data.length;i++){
if(data[i].value==this.state1){
data[i].number=Number(data[i].number)+1
}
}
function compare(property){
return function(a,b){
var value1 = a[property];
var value2 = b[property];
return value1 - value2;
}
}
var datas=data.sort(compare('number')).reverse() //根据搜索次数进行倒排序
localStorage.setItem('ReverseSort', JSON.stringify(datas)) //储存到所有历史数据中
if(datas.length>5){//限制页面上只显示五条历史数据
var list=datas.slice(0,5)
localStorage.setItem('srcOrderNo', JSON.stringify(list))
}else{
localStorage.setItem('srcOrderNo', JSON.stringify(datas))
}
//如果历史数据中不存在,则需要进行添加
for(var i=0;i<data.length;i++){
if(data[i].value==this.state1){
return
}
}
//新数据
data.push({
value: this.state1,
code: '1',
number:1
})
function compare(property){
return function(a,b){
var value1 = a[property];
var value2 = b[property];
return value1 - value2;
}
}
var datat=data.sort(compare('number')).reverse()
localStorage.setItem('ReverseSort', JSON.stringify(datat))
if(datat.length>5){
var list=datat.slice(0,5)
localStorage.setItem('srcOrderNo', JSON.stringify(list))
}else{
localStorage.setItem('srcOrderNo', JSON.stringify(datat))
}
} else { // 首次创建
let str=[{value: this.state1,
code: '0',
number:1}]
//创建用于存储所有的历史搜索,计算数据输入频率的高低
localStorage.setItem('ReverseSort', JSON.stringify(str))
//创建用于存储页面上的历史搜索,根据计算展示搜索频率最高的数据
localStorage.setItem('srcOrderNo', JSON.stringify(str))
}
}
},
}
</script>
页面一共存储了两个数据
ReverseSort 所有历史数据
srcOrderNo 页面上需要展示的数据
效果图:
因为 localStorage 一般只能储存 5M 的数据,所以这个可以限制历史数据存储的数量。
还没有进行优化,以后有时间再优化