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 相关文章推荐
JS自动缩小超出大小的图片
Oct 12 Javascript
javaScript NameSpace 简单说明介绍
Jul 18 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
jQuery中:selected选择器用法实例
Jan 04 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
Aug 06 Javascript
老生常谈onBlur事件与onfocus事件(js)
Jul 09 Javascript
微信小程序 弹框和模态框实现代码
Mar 10 Javascript
JavaScript纯色二维码变成彩色二维码
Jul 23 Javascript
纯js代码生成可搜索选择下拉列表的实例
Jan 11 Javascript
Element-UI踩坑之Pagination组件的使用
Oct 29 Javascript
React父子组件间的传值的方法
Nov 13 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
Sep 26 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网页游戏学习之Xnova(ogame)源码解读(五)
2014/06/23 PHP
php提高网站效率的技巧
2015/09/29 PHP
smarty高级特性之过滤器的使用方法
2015/12/25 PHP
yii插入数据库防并发的简单代码
2017/05/27 PHP
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
Javascript面向对象之四 继承
2011/02/08 Javascript
页面使用密码保护代码
2013/04/10 Javascript
js实现在网页上简单显示时间的方法
2015/03/02 Javascript
如何实现星星评价(jquery.raty.js插件)
2016/12/21 Javascript
canvas绘制表盘时钟
2017/01/23 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
利用Ionic2 + angular4实现一个地区选择组件
2017/07/27 Javascript
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
layui监听单元格编辑前后交互的例子
2019/09/16 Javascript
javascript将16进制的字符串转换为10进制整数hex
2020/03/05 Javascript
JavaScript Html实现移动端红包雨功能页面
2021/01/10 Javascript
详解Python中with语句的用法
2015/04/15 Python
Python闭包实现计数器的方法
2015/05/05 Python
Python的Django框架可适配的各种数据库介绍
2015/07/15 Python
python中学习K-Means和图片压缩
2017/11/20 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
python ssh 执行shell命令的示例
2020/09/29 Python
详解Python中openpyxl模块基本用法
2021/02/23 Python
css 如何让背景图片拉伸填充避免重复显示
2013/07/11 HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
2019/09/05 HTML / CSS
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
Deux par Deux官方网站:设计师童装
2020/01/03 全球购物
Linux如何压缩可执行文件
2014/03/27 面试题
结婚典礼证婚词
2014/01/11 职场文书
婚前协议书
2014/04/15 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书
2019年幼儿园家长接送责任书
2019/10/29 职场文书
vue ref如何获取子组件属性值
2022/03/31 Vue.js