Element输入框带历史查询记录

2019-01-14 admin

需求描述

页面的查询框增加一下显示历史查找记录

clipboard.png

实现及踩坑记录

使用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))
      }
    }
}

参考

  1. vue中使用localStorage存储信息
  2. element-ui带输入建议的input框踩坑

原文链接:https://segmentfault.com/a/1190000017889474

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-50993.html

文章标题:Element输入框带历史查询记录

相关文章
JS中Select下拉列表类(支持输入模糊查询)功能
下面给大家分享一段代码关于select下拉列表类支持输入模糊查询功能的实现代码,具体代码如下所示: <span style="font-size:14px;"> <HTML> &lt...
2017-03-06
详解angular2封装material2对话框组件
1. 说明 angular-material2自身文档不详,控件不齐,使用上造成了很大的障碍。这里提供一个方案用于封装我们最常用的alert和confirm组件。 2. 官方使用方法之alert ①编写alert内容组件 @Componen...
2017-03-13
2015年Web:追求原有“框架”外的新功能
Web目前正在经历一场巨大的变化,ServiceWorkers、传感器访问、推送通知等方式将打破Web原有的框架。而在2015年我们可以利用这几种方式快速的改变自己的网站。在不断增多的Web功能中寻求最合适自己的功能。 Web最初的设想是一...
2015-11-12
好消息!好消息!饿了么ElementUI用户的福音——ElementUIVerify!
如果你受够了饿了么ElementUI原生的校验方式,那就来试试它吧! 前言 饿了么ElementUI虽好,但表单校验的体验不够理想 如果说产品开发要讲究用户体验,那插件开发也要讲究开发体验,而好的开发体验,要靠好的api设计来保障 本人专注...
2017-12-24
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
1.bootstrap-table 单击单行选中 $('#gzrwTable').on('click-row.bs.table', function(e, row, $element) { $(&#x...
2017-02-17
ajax分页效果(bootstrap模态框)
ajax分页效果图: 上干货: /** * ajax分页 */ $(function(){ $(".modal-body").find(".pagination"...
2017-02-20
Vue.js 2.0中select级联下拉框实例
在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用。首先我先说一下的我使用的技术,我参考了网上成熟的经验,选择以Vue.js 2.0+Vue-route...
2017-03-14
js实现点击文本框显示日期选择器特效代码分享
本文实例讲述了JS+CSS实现美化的下拉列表框效果。分享给大家供大家参考。具体如下: 三款款经过JS+CSS美化的下拉列表,效果很不错,总有一款适合你,先看看运行效果图: 具体代码如下: <head> <meta htt...
2017-03-29
js实现带圆角的两级导航菜单效果代码
本文实例讲述了js实现带圆角的两级导航菜单效果代码。分享给大家供大家参考。具体如下: 这是一款使用JS做的圆角菜单,支持两级菜单显示,本人比较喜欢的风格,修改使用方便,新手也能上手快。使用有几张圆角图片来修饰了菜单,喜欢的朋友可以下载代码留...
2017-03-29
JS基于cookie实现来宾统计记录访客信息的方法
<p>本文实例讲述了JS基于cookie实现来宾统计记录访客信息的方法。分享给大家供大家参考。具体如下:</p><p>这里使用JavaScript记录访客的来宾信息,记录是第几次来访,显示的信息有:您的名...
2017-03-29
回到顶部