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 相关文章推荐
document.documentElement && document.documentElement.scrollTop
Dec 01 Javascript
Javascript 日期处理之时区问题
Oct 08 Javascript
jQuery中:checkbox选择器用法实例
Jan 03 Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
Sep 14 Javascript
jQuery插件zTree实现获取一级节点数据的方法
Mar 08 Javascript
Angular服务Request异步请求的实例讲解
Aug 13 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
Nov 08 Javascript
9102了,你还不会移动端真机调试吗
Mar 25 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 Javascript
vue-router 控制路由权限的实现
Sep 24 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
快速配置PHPMyAdmin方法
2008/06/05 PHP
php下实现在指定目录搜索指定类型文件的函数
2008/10/03 PHP
PHP 返回数组后处理方法(开户成功后弹窗提示)
2017/07/03 PHP
js 创建书签小工具之理论
2011/02/25 Javascript
Jquery 点击按钮显示和隐藏层的代码
2011/07/25 Javascript
javascript 基础篇2 数据类型,语句,函数
2012/03/14 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
2015/02/03 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
2016/09/23 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
2017/05/24 Javascript
javascript定时器的简单应用示例【控制方块移动】
2019/06/17 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
2019/07/17 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
2019/10/30 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
JS中FileReader类实现文件上传及时预览功能
2020/03/27 Javascript
小程序富文本提取图片可放大缩小
2020/05/26 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
JavaScript ES 模块的使用
2020/11/12 Javascript
three.js如何实现3D动态文字效果
2021/03/03 Javascript
[03:16]DOTA2完美大师赛主赛事首日集锦
2017/11/23 DOTA
Python字符遍历的艺术
2008/09/06 Python
python之文件读取一行一行的方法
2018/07/12 Python
Python爬虫的两套解析方法和四种爬虫实现过程
2018/07/20 Python
django数据关系一对多、多对多模型、自关联的建立
2019/07/24 Python
html+css实现自定义图片上传按钮功能
2019/09/04 HTML / CSS
行政人事经理职位说明书
2014/03/05 职场文书
北京英语导游词
2015/02/12 职场文书
教师节寄语2015
2015/03/23 职场文书
安全温馨提示语大全
2015/07/14 职场文书
2015年中秋晚会主持稿
2015/07/30 职场文书
2015新员工工作总结范文
2015/10/15 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书
2016年幼儿园教研活动总结
2016/04/05 职场文书
2019最新版劳务派遣管理制度
2019/08/16 职场文书
Nginx安装配置详解
2022/06/25 Servers