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)
storage.set(SEARCH_KEY,searches)
return searches
}

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

<template>
<div class="search">
<!-- 顶部搜索栏 -->
<div class="header">
<div class="head-title title-style">输入关键字</div>
<div class="head-input">
<input
type="text"
ref="inputchange"
v-model="valuetext"
@keyup.enter="onSearch(true)"
@keyup.tab="onSearch(true)"
@focus="initPage"
placeholder="请输入关键字进行搜索"
/>
<div type="text" @click="clear" class="input-btn title-style">清除</div>
</div>

<div class="history-panel" v-if="!isFocus">
<div v-if="historyxs">搜索历史</div>
<div v-if="searches_list.length>0">
<ul class="his_ulcon" v-if="historyxs">
<li
v-for="(item,index) in searches_list"
:key="index"
@click="historysearch(item)"
>{{item}}</li>
</ul>
</div>
<div class="history-tips" v-else>暂无搜索记录！</div>
<p v-if="historyxs" @click="clearhis">清空历史记录</p>
</div>
</div>
<!-- ... 此处省略无关代码 -->

<!-- 底部按钮 -->
<div class="footer title-style">
<van-row>
<van-col span="12">
<div class="left" @click="resetData">重置所选条件</div>
</van-col>
<van-col span="12">
<div class="right" @click="onSearch(true)">立即搜索</div>
</van-col>
</van-row>
</div>
</div>
</template>

<script type="text/Babel">
import { saveSearch } from "../../utils/cache"; //引用本地存储js
import storage from "good-storage"; //引入good-storage包
export default {
data() {
return {
isFocus: true,
searches_list: [], //历史搜索记录列表
historyxs: false,
valuetext: ""
};
},
mounted() {},
methods: {
//输入框获取焦点
initPage() {
this.isFocus = false;
this.$emit("initSearchPage");
//为避免重复先清空再添加
this.searches_list = [];
let searches = storage.get("_search_");
this.searches_list = searches ? searches : [];
if (this.searches_list.length > 0) {
this.historyxs = true;
} else {
this.historyxs = false;
}
},
//清空历史记录
clearhis() {
storage.remove("_search_");
this.searches_list = [];
this.historyxs = false;
},
//点击历史搜索把搜索的记录添加到good-storage中
historysearch(item) {
saveSearch(item);
this.valuetext = item;
this.historyxs = false;
},
resetData() {
// ...
//  此次省略重置数据的逻辑代码
},
onSearch(isFirst) {
this.isFocus = true;
if (this.valuetext != "") {
//搜索框不为空
saveSearch(this.valuetext); // 本地存储搜索的内容
let params = {
majorInfo: this.valuetext //流程类型或者流程名称
};
this.$emit("handleSearch", params);
this.isFocus = true;
}
// ...
// 此次省略调用搜索接口的代码
},
clear() {
this.valuetext = "";
}
// ... 无关代码已省略
}
};
</script>

<style lang="less" rel="stylesheet/less" type="text/less" scoped>
.search {
overflow-y: scroll;
overflow-x: hidden;
padding: 0.14rem 0.12rem 0.53rem;
.header {
border-bottom: 0.01rem solid #f2f2f2;
.head-title {
padding-bottom: 0.05rem;
color: #666666;
}
.head-input {
width: 100%;
padding-bottom: 0.1rem;
display: flex;
flex-direction: row;
justify-content: space-between;

> input {
height: 0.29rem;
width: 2.84rem;
border-radius: 0.03rem;
background-color: #f6f6f6;
font-family: PingFang-SC-Regular;
font-weight: Regular;
color: #999999;
font-size: 0.12rem;
padding-left: 0.12rem;
}
.input-btn {
color: #029ffb;
width: 0.5rem;
height: 0.29rem;
line-height: 0.29rem;
text-align: center;
}
}
.history-panel {
width: 100%;
overflow: hidden;
padding: 0.1rem 0;
border-top: 1px solid #f2f2f2;
.his_ulcon {
margin-top: 0.1rem;
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
> li {
border: 1px solid #f2f2f2;
border-radius: 0.03rem;
display: inline-block;
font-size: 0.12rem;
padding: 0 0.15rem;
width: fit-content; //div宽度自适应文字内容
width: -webkit-fit-content;
width: -moz-fit-content;
height: 0.29rem;
line-height: 0.29rem;
text-align: center;
margin-right: 0.1rem;
background-color: #f2f2f2;
margin-bottom: 0.1rem;
}
}
div {
box-sizing: border-box;
font-size: 0.13rem;
color: #666666;
font-weight: Medium;
font-family: PingFang-SC-Medium;
}
> p {
text-align: center;
margin-top: 0.1rem;
font-size: 0.13rem;
}
}
.history-tips {
text-align: center;
}
}
.title-style {
font-size: 0.13rem;
font-weight: Medium;
font-family: PingFang-SC-Medium;
}
}
</style>

温馨提示:引入cache.js时你的文件路径要按照你自己的路径来 一 一对应

总结

以上所述是小编给大家介绍的Vue 实现输入框新增搜索历史记录功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

• vue.js 实现输入框动态添加功能
• vue input输入框模糊查询的示例代码
• vue实现验证码输入框组件
• Vue实现数字输入框中分割手机号码的示例
• Vue.js实现输入框绑定的实例代码
• vue组件中点击按钮后修改输入框的状态实例代码
• vue下拉菜单组件（含搜索）的实现代码