Vue搜索框显示最近(历史)搜索记录
效果:实现:(一)HTML<el-input@input="searchContent($event)"v-model="keywords"@keyup.enter.native="submit"size="small"id="input"class="input"placeholder="请输入内容"@focus="onInputFocus"@blur="onInputBlus"&g
·
效果:
实现:
当按回车键的时候会将最近搜索的内容展示出来。
(一)HTML
<el-input
@input="searchContent($event)"
v-model="keywords"
@keyup.enter.native="submit"
size="small"
id="input"
class="input"
placeholder="请输入内容"
@focus="onInputFocus"
@blur="onInputBlus">
</el-input>
<div class="allHislist">
<span
v-for="(item, index) in allHislist"
:key="index"
v-show="allHislistShow">
{{ item }}</span >
</div>
(二)Script
// 搜索框输入的内容
keywords: "",
//查询返回的内容
dataList: [],
// 最近搜索列表
hislist: [],
(三) 方法
created() {
let all = localStorage.allHislist;
if (all) {
// 将数组转字符串
this.allHislist = JSON.parse(all);
}
}
submit() {
//判断是否有重复
var index = this.allHislist.findIndex((ele) => {
return ele == this.keywords;
});
//如果有的话就删除重复
if (index != -1) {
this.allHislist.splice(index, 1);
}
//向数组第一位添加
this.allHislist.unshift(this.keywords);
//如果数组长度大于4 就删除最后一项
if (this.allHislist.length > 4) {
this.allHislist.splice(5, 1);
}
// 本地存储历史记录数组
localStorage.allHislist = JSON.stringify(this.allHislist);
}
更多推荐
已为社区贡献3条内容
所有评论(0)