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

參考

1. vue中使用localStorage存儲信息
2. element-ui帶輸入建議的input框踩坑