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 相关文章推荐
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 Javascript
javascript进行四舍五入方法汇总
Dec 16 Javascript
jQuery选择器querySelector的使用指南
Jan 23 Javascript
JS简单实现tab切换效果的多窗口显示功能
Sep 07 Javascript
Bootstrap源码解读导航(6)
Dec 23 Javascript
纯原生js实现贪吃蛇游戏
Apr 16 Javascript
node.js使用redis储存session的方法
Sep 26 Javascript
Javascript之高级数组API的使用实例
Mar 08 Javascript
Angular 多模块项目构建过程
Feb 13 Javascript
在Vue中创建可重用的 Transition的方法
Jun 02 Javascript
javaScript实现一个队列的方法
Jul 14 Javascript
通过实例解析js可枚举属性与不可枚举属性
Dec 02 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生成年月日下载列表的方法
2015/04/24 PHP
php进程daemon化的正确实现方法
2018/09/06 PHP
关于JavaScript的with 语句的使用方法
2011/05/09 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
2011/09/22 Javascript
解析JavaScript中的不可见数据类型
2013/12/02 Javascript
前台js对象在后台转化java对象的问题探讨
2013/12/20 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
jquery合并表格中相同文本的相邻单元格
2015/07/17 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
2015/09/17 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
2016/09/08 Javascript
Three.js快速入门教程
2016/09/09 Javascript
String字符串截取的四种方式总结
2016/11/28 Javascript
js自定义trim函数实现删除两端空格功能
2018/02/09 Javascript
微信小程序实现侧边栏分类
2019/10/21 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
2020/08/31 Javascript
JavaScript this关键字的深入详解
2021/01/14 Javascript
[02:02]特效爆炸!DOTA2珍宝之瓶待你开启
2018/08/21 DOTA
pymongo实现多结果进行多列排序的方法
2015/05/16 Python
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
python实现决策树
2017/12/21 Python
python生成lmdb格式的文件实例
2018/11/08 Python
Pandas删除数据的几种情况(小结)
2019/06/21 Python
Python3 实现减少可调用对象的参数个数
2019/12/20 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
tensorflow获取预训练模型某层参数并赋值到当前网络指定层方式
2020/01/24 Python
大女孩胸罩:Big Girls Bras
2016/12/15 全球购物
美国购买新书和二手书网站:Better World Books
2018/10/31 全球购物
四年级学生评语大全
2014/04/21 职场文书
个性婚礼策划方案
2014/05/17 职场文书
出生医学证明书
2014/09/15 职场文书
2014年仓库保管员工作总结
2014/12/03 职场文书
走进毛泽东观后感
2015/06/04 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP
python 定义函数 返回值只取其中一个的实现
2021/05/21 Python
golang三种设计模式之简单工厂、方法工厂和抽象工厂
2022/04/10 Golang