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


Posted in Javascript onOctober 15, 2019

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

Javascript 相关文章推荐
图像替换新技术 状态域方法
Jan 28 Javascript
javascript常见用法总结
May 22 Javascript
iframe调用父页面函数示例详解
Jul 17 Javascript
JavaScript使用focus()设置焦点失败的解决方法
Sep 03 Javascript
浅谈JavaScript中的字符编码转换问题
Jul 07 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 Javascript
利用fecha进行JS日期处理
Nov 21 Javascript
Vue如何引入远程JS文件
Apr 20 Javascript
bmob js-sdk 在vue中的使用教程
Jan 21 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
Sep 14 Javascript
validform表单验证的实现方法
Mar 08 Javascript
JS document文档的简单操作完整示例
Jan 13 Javascript
Centos7 安装Node.js10以上版本的方法步骤
Oct 15 #Javascript
微信小程序如何实现五星评价功能
Oct 15 #Javascript
node.js express框架实现文件上传与下载功能实例详解
Oct 15 #Javascript
ES6 Promise对象概念及用法实例详解
Oct 15 #Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 15 #Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
Oct 15 #Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
Oct 15 #Javascript
You might like
php curl的深入解析
2013/06/02 PHP
php实现的支持断点续传的文件下载类
2014/09/23 PHP
PHP7 标准库修改
2021/03/09 PHP
js活用事件触发对象动作
2008/08/10 Javascript
跟我学Nodejs(三)--- Node.js模块
2014/05/25 NodeJs
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
2016/04/14 Javascript
浅谈JavaScript函数的四种存在形态
2016/06/08 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
2016/07/01 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
2016/07/26 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
jQuery+PHP+Mysql实现抽奖程序
2020/04/12 jQuery
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
详解layui中的树形关于取值传值问题
2018/01/16 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
js中let能否完全替代IIFE
2019/06/15 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
[01:39:04]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第二场 2月1日
2021/03/11 DOTA
Python解析并读取PDF文件内容的方法
2018/05/08 Python
十分钟搞定pandas(入门教程)
2019/06/21 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
使用python脚本自动生成K8S-YAML的方法示例
2020/07/12 Python
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
生日主持词
2014/03/20 职场文书
努力学习演讲稿
2014/05/10 职场文书
本科生就业推荐信
2014/05/19 职场文书
计算机毕业生自荐信
2014/06/12 职场文书
建筑安全生产责任书
2014/07/22 职场文书
职业生涯规划书怎么写?
2014/09/14 职场文书
学校联谊协议书
2014/09/16 职场文书
师德先进个人事迹材料
2014/12/19 职场文书
幼儿园欢迎词范文
2015/01/26 职场文书
php访问对象中的成员的实例方法
2021/11/17 PHP
2021年国漫热度排行前十,完美世界上榜,第四是美国动画作品
2022/03/18 国漫
PYTHON InceptionV3模型的复现详解
2022/05/06 Python