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

vue实现搜索显示历史搜索记录,采用插件-good-storage安装插件    npminstallgood-stor

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