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 相关文章推荐
浏览器加载、渲染和解析过程黑箱简析
Nov 29 Javascript
jquery 面包屑导航 具体实现
Jun 05 Javascript
根据选择不同的下拉值出现相对应的文本输入框
Aug 01 Javascript
JS实现时间格式化的方式汇总
Oct 16 Javascript
JS在可编辑的div中的光标位置插入内容的方法
Nov 20 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
Oct 28 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
js实现文字无缝向上滚动
Feb 16 Javascript
jQuery中用on绑定事件时需注意的事项
Mar 19 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
Aug 17 Javascript
layer弹出层取消遮罩的方法
Sep 25 Javascript
vue项目在线上服务器访问失败原因分析
Aug 14 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版)
2006/10/09 PHP
php中大括号作用介绍
2012/03/22 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
IE DOM实现存在的部分问题及解决方法
2009/07/25 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
2014/12/16 Javascript
JavaScript中number转换成string介绍
2014/12/31 Javascript
老司机带你解读jQuery插件开发流程
2016/05/16 Javascript
解析Javascript单例模式概念与实例
2016/12/05 Javascript
JS基于面向对象实现的拖拽功能示例
2016/12/20 Javascript
Angular的模块化(代码分享)
2016/12/26 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
vue如何从接口请求数据
2017/06/22 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
2017/08/21 Javascript
React Native中TabBarIOS的简单使用方法示例
2017/10/13 Javascript
元素全屏的设置与监听实例
2017/11/28 Javascript
详解如何实现一个简单的 vuex
2018/02/10 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
2019/04/02 Javascript
浏览器事件循环与vue nextTicket的实现
2019/04/16 Javascript
layui禁用侧边导航栏点击事件的解决方法
2019/09/25 Javascript
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
Python获取指定字符前面的所有字符方法
2018/05/02 Python
符合语言习惯的 Python 优雅编程技巧【推荐】
2018/09/25 Python
使用python判断你是青少年还是老年人
2018/11/29 Python
PythonWeb项目Django部署在Ubuntu18.04腾讯云主机上
2019/04/01 Python
Django 自动生成api接口文档教程
2019/11/19 Python
Python爬虫爬取电影票房数据及图表展示操作示例
2020/03/27 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
Html5新增标签有哪些
2017/04/13 HTML / CSS
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
大学生毕业的自我鉴定
2013/11/13 职场文书
财务会计人员岗位职责
2013/11/30 职场文书
酒店大堂副理的职责范文
2014/02/13 职场文书
会计岗位职责范本
2014/03/07 职场文书
小学一年级学生评语大全
2014/12/25 职场文书