Element输入框带历史查询记录的实现示例


Posted in Javascript onJanuary 15, 2019

需求描述

页面的查询框增加一下显示历史查找记录

Element输入框带历史查询记录的实现示例

实现及踩坑记录

使用Element带输入建议的输入框来实现此需求。用法详见官网

1. 坑1:不能直接在querySearch里返回数组,一定要调用回调函数cb来处理数据

看了一下例子,建议列表应该是个数组,然后我就在querySearch里直接返回了一个数组:

querySearch(queryString, cb) {
  return JSON.parse(localStorage.getItem('srcOrderNoArr'))
 },

但是回到网页上却发现列表数据加载不出来

正确姿势:

/**
 * 建议列表
 */
querySearch(queryString, cb) {
 // 调用 callback 返回建议列表的数据
 cb(JSON.parse(localStorage.getItem('srcOrderNoArr')))
}

2. 坑2:数组内数据格式有要求,格式一定要是[{value: '', xxx: ''}, {value: '', xxx: ''}, ...]

这个建议列表是根据数组内的value属性值来渲染的,所以数组内的对象一定要有value键值对。比如说是这样的:

data () {
  return {
    srcOrderNoArr: [{
      value: '', // 这个必须要有
      type: ''
    },
    {
      value: '',
      type: ''
    },
    {
      value: '',
      type: ''
    }]
  }
}
methods: {
  /**
   * 把搜索记录存入localStorage
   */
  setIntoStorage (type) {
   let self = this
   let noArr = [], // 订单号历史记录数组
    text = '', value = ''
   switch (type) {
    case 'srcOrderNo':
     text = 'srcOrderNoArr'
     value = self.srcOrderNo
     break
    case 'jobOrderNo':
     text = 'jobOrderNoArr'
     value = self.jobOrderNo
     break
    case 'cntNo':
     text = 'cntNoArr'
     value = self.cntNo
     break
    default:
     break
   }
   noArr.push({value: value, type: type})
   if(JSON.parse(localStorage.getItem(text))) { // 判断是否已有xxx查询记录的localStorage
    if(localStorage.getItem(text).indexOf(value) > -1 ) { // 判断是否已有此条查询记录,若已存在,则不需再存储
     return
    }
    if(JSON.parse(localStorage.getItem(text)).length >= 5) {
     let arr = JSON.parse(localStorage.getItem(text))
     arr.pop()
     localStorage.setItem(text, JSON.stringify(arr))
    }
    localStorage.setItem(text, JSON.stringify(noArr.concat(JSON.parse(localStorage.getItem(text)))))
   }
   else { // 首次创建
    localStorage.setItem(text, JSON.stringify(noArr))
   }
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript里的条件判断
Feb 27 Javascript
js中巧用cssText属性批量操作样式
Mar 13 Javascript
7个去伪存真的JavaScript面试题
Jan 07 Javascript
JS声明式函数与赋值式函数实例分析
Dec 13 Javascript
jquery 判断是否支持Placeholder属性的方法
Feb 07 Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 Javascript
vue-cli脚手架引入图片的几种方法总结
Mar 13 Javascript
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 Javascript
Vue.js 利用v-for中的index值实现隔行变色
Aug 01 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
Dec 11 Javascript
ES6 Object方法扩展的应用实例分析
Jun 25 Javascript
解决vue2中使用elementUi打包报错的问题
Sep 22 Javascript
微信小程序实现多选删除列表数据功能示例
Jan 15 #Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
Jan 15 #Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
Jan 15 #Javascript
微信 jssdk 签名错误invalid signature的解决方法
Jan 14 #Javascript
详解从react转职到vue开发的项目准备
Jan 14 #Javascript
node全局变量__dirname与__filename的区别
Jan 14 #Javascript
微信小程序时间轴实现方法示例
Jan 14 #Javascript
You might like
适用于php-5.2 的 php.ini 中文版[金步国翻译]
2011/04/17 PHP
windows下安装php的memcache模块的方法
2015/04/07 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
深入理解JavaScript系列(2) 揭秘命名函数表达式
2012/01/15 Javascript
jquery 之 $().hover(func1, funct2)使用方法
2012/06/14 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
nodejs读取memcache示例分享
2014/01/02 NodeJs
js实现iframe自动自适应高度的方法
2015/02/17 Javascript
jQuery实现的经典滑动门效果
2015/09/22 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
简单了解JavaScript操作XPath的一些基本方法
2016/06/03 Javascript
JS实现全屏的四种写法
2016/12/30 Javascript
jQuery插件扩展操作入门示例
2017/01/16 Javascript
fullCalendar中文API官方文档
2017/02/07 Javascript
微信小程序 页面跳转及数据传递详解
2017/03/14 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
优雅的处理vue项目异常实战记录
2019/06/05 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
2021/01/18 Javascript
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
使用Python压缩和解压缩zip文件的教程
2015/05/06 Python
python超简单解决约瑟夫环问题
2015/05/12 Python
python版大富翁源代码分享
2018/11/19 Python
Python多图片合并PDF的方法
2019/01/03 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
Python3搭建http服务器的实现代码
2020/02/11 Python
使用Python pip怎么升级pip
2020/08/11 Python
python,Java,JavaScript实现indexOf
2020/09/09 Python
关于box-sizing的全面理解
2016/07/28 HTML / CSS
团组织推优材料
2014/12/29 职场文书
2016年校长新年寄语
2015/08/17 职场文书
Java基础之线程锁相关知识总结
2021/06/30 Java/Android
Python使用永中文档转换服务
2022/05/06 Python