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 相关文章推荐
jQuery+css+html实现页面遮罩弹出框
Mar 21 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
Apr 29 Javascript
js实现仿QQ秀换装效果的方法
Mar 04 Javascript
JS和canvas实现俄罗斯方块
Mar 14 Javascript
Vue实现动态显示textarea剩余字数
May 22 Javascript
angularjs中ng-bind-html的用法总结
May 23 Javascript
JavaScript操作文件_动力节点Java学院整理
Jun 30 Javascript
Swiper自定义分页器使用详解
Dec 28 Javascript
小程序视频列表中视频的播放与停止的示例代码
Jul 20 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
Jul 21 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 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二维/三维数组转字符串
2013/09/13 PHP
php实现的一个简单json rpc框架实例
2015/03/30 PHP
discuz论坛更换域名,详细文件修改步骤
2020/12/09 PHP
js CSS操作方法集合
2008/10/31 Javascript
jQuery实现数字加减效果汇总
2014/12/16 Javascript
js中split和replace的用法实例
2015/02/28 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
原生js制作简单的数字键盘
2015/04/24 Javascript
JavaScript实现快速排序的方法
2015/07/31 Javascript
JQuery EasyUI的使用
2016/02/24 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
Angular2库初探
2017/03/01 Javascript
js+html获取系统当前时间
2017/11/10 Javascript
js构建二叉树进行数值数组的去重与优化详解
2018/03/26 Javascript
vue router+vuex实现首页登录验证判断逻辑
2018/05/17 Javascript
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
antd Upload 文件上传的示例代码
2018/12/14 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
2019/04/28 Javascript
Vue如何基于vue-i18n实现多国语言兼容
2020/07/17 Javascript
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
[00:39]DOTA2上海特级锦标赛 Liquid战队宣传片
2016/03/04 DOTA
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
利用python求解物理学中的双弹簧质能系统详解
2017/09/29 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
Django框架用户注销功能实现方法分析
2019/05/28 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
手把手教你从PyCharm安装到激活(最新激活码),亲测有效可激活至2089年
2020/11/25 Python
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
利用 CSS3 实现的无缝轮播功能代码
2017/09/25 HTML / CSS
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
服装公司总经理岗位职责
2013/11/30 职场文书
个人查摆问题整改措施
2014/10/04 职场文书
浅谈Python数学建模之整数规划
2021/06/23 Python