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 相关文章推荐
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 Javascript
javascript 数组学习资料收集
Apr 11 Javascript
js实现div弹出层的方法
Nov 20 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
Sep 18 Javascript
基于JavaScript实现弹出框效果
Feb 19 Javascript
浅谈JavaScript中的分支结构
Jul 01 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
Jan 02 Javascript
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
vuejs数据超出单行显示更多,点击展开剩余数据实例
May 05 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
Jun 06 Javascript
基于脚手架创建Vue项目实现步骤详解
Aug 03 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
我的论坛源代码(十)
2006/10/09 PHP
php Undefined index的问题
2009/06/01 PHP
apache+php+mysql安装配置方法小结
2010/08/01 PHP
php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
PHP中变量引用与变量销毁机制分析
2014/11/15 PHP
PHP简单生成缩略图相册的方法
2015/07/29 PHP
php上传大文件失败的原因及应对策略
2015/10/20 PHP
WordPress中创建用户角色的相关PHP函数使用详解
2015/12/25 PHP
thinkPHP简单实现多个子查询语句的方法
2016/12/05 PHP
PHP静态成员变量和非静态成员变量详解
2017/02/14 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
javascript globalStorage类代码
2009/06/04 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
2012/06/14 Javascript
CSS+jQuery实现的一个放大缩小动画效果
2013/09/24 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
微信小程序 五星评分的实现实例
2017/08/04 Javascript
微信小程序实现form表单本地储存数据
2019/06/27 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
jQuery实现聊天对话框
2020/02/08 jQuery
使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
2014/04/15 Python
Python自动化运维和部署项目工具Fabric使用实例
2016/09/18 Python
Python tkinter模块中类继承的三种方式分析
2017/08/08 Python
利用Python如何批量更新服务器文件
2018/07/29 Python
python日志logging模块使用方法分析
2019/05/23 Python
一篇文章弄懂Python中所有数组数据类型
2019/06/23 Python
python 下划线的不同用法
2020/10/24 Python
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
荷兰街头时尚之家:Funkie House
2019/03/18 全球购物
《记金华的双龙洞》教学反思
2014/04/19 职场文书
生日庆典策划方案
2014/06/02 职场文书
会计求职自荐信
2014/06/20 职场文书
成人成长感言如何写?
2019/08/16 职场文书
Win11自动黑屏怎么办 Win11自动黑屏设置教程
2022/07/15 数码科技