上代码:
<template>
<div>
<el-autocomplete class="inline-input" clearable 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>
<script>
export default {
name: "userManagement",
data() {
return {
//建议的数组,这里可以看成历史数据的数组,这个数组不能为空,为空的话就会报错
restaurants: [
{
value:'',//必须项
code:''
}
],
state1: '',
}
},
created: function() {
// sessionStorage.removeItem('srcOrderNo') 清空缓存
// sessionStorage.removeItem('ReverseSort')
},
mounted() {},
methods: {
querySearch(queryString, cb) {
//如果有缓存值,那就给历史搜索的数组赋值
if(JSON.parse(sessionStorage.getItem('srcOrderNo'))){
this.restaurants=JSON.parse(sessionStorage.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(sessionStorage.getItem('ReverseSort'))) { // 判断是否有 缓存值
var data=JSON.parse(sessionStorage.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() //根据搜索次数进行倒排序
sessionStorage.setItem('ReverseSort', JSON.stringify(datas)) //储存到所有历史数据中
if(datas.length>5){//限制页面上只显示五条历史数据
var list=datas.slice(0,5)
sessionStorage.setItem('srcOrderNo', JSON.stringify(list))
}else{
sessionStorage.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()
sessionStorage.setItem('ReverseSort', JSON.stringify(datat))
if(datat.length>5){
var list=datat.slice(0,5)
sessionStorage.setItem('srcOrderNo', JSON.stringify(list))
}else{
sessionStorage.setItem('srcOrderNo', JSON.stringify(datat))
}
} else { // 首次创建
let str=[{value: this.state1,
code: '0',
number:1}]
//创建用于存储所有的历史搜索,计算数据输入频率的高低
sessionStorage.setItem('ReverseSort', JSON.stringify(str))
//创建用于存储页面上的历史搜索,根据计算展示搜索频率最高的数据
sessionStorage.setItem('srcOrderNo', JSON.stringify(str))
}
this.state1 = ''
}
},
}
</script>