ElementUI 組件 el-autocomplete 實現文本框歷史查詢建議

前言

需求：輸入開票主體：該操作框爲下拉輸入框，用戶可選擇歷史充值過的開票主體，也可以重新輸入新的開票主體

    此處根據需求實現“開票主體歷史搜索建議”功能，按照需求的下拉框 el-select 不完全符合產品設計；
    這裏適合產品的是支持下拉選擇歷史選項的文本輸入框；支持輸入新的數據，或者選擇之前有輸入過的歷史數據，新數據會放入存儲歷史集合，並在集合大小超出設定最大值後，按先進先出原則，清除歷史記錄。相對下拉組件，帶輸入建議的文本框組件 el-autocomplete 符合此需求。

功能實現

Vue 頁面關鍵代碼
    注意要引入組件 el-autocomplete 才能使用。

          <el-form ref="protocol_form" :model="protocolInfo">
            <el-form-item label="請選擇支付方式：" class="labelClass" required>
              <el-form-grid style="float: left;">
                <template>
                  <el-radio-group v-model="protocolInfo.payWay">
                    <el-radio :label="0"> <img src="./img/aliPay2.png"/> </el-radio>
                    <el-radio :label="1"> <img src="./img/card.png"/> </el-radio>
                  </el-radio-group>
                </template>
              </el-form-grid>
            </el-form-item>
            <el-form-item label="請輸入開票主體：" class="labelClass" required>
              <el-form-grid style="float: left;">
                <el-autocomplete
                  v-model="protocolInfo.invoiceAccount"
                  :fetch-suggestions="querySearch"
                  placeholder="請輸入內容"/>
              </el-form-grid>
            </el-form-item>
            <el-form-item style="float: left">
              <el-form-grid>
                <template>
                  <el-checkbox v-model="protocolInfo.know"></el-checkbox>本人已知悉：付款賬號的戶名需與開票擡頭（即合同主體）保持一致，否則會影響發票索取。
                </template>
              </el-form-grid>
            </el-form-item>
          </el-form>

Js 文件關鍵代碼
    Js 存儲查詢記錄及渲染歷史記錄；文本框獲取鼠標焦點事件，fetch-suggestions 方法返回輸入建議，新的輸入建議可以通過 localStorage 放入前端本地存儲中，最多保留 6 條開票主體記錄；支持輸入新的開票主體，點擊同意按鈕時觸發文本存儲校驗，新的文本會放入歷史記錄集合，並在超出 6 條記錄時，清除第一條記錄。

export default {
  data: function () {
    return {
      // 協議信息
      protocolInfo: {
        payWay: 0,
        invoiceAccount: '',
        know: false,
      }
    }
  },
  methods: {
    // 點擊同意
    agreeProtocol: function () {
      this.handleSearchHistory()
    },
    // 返回輸入建議的方法，僅當你的輸入建議數據 resolve 時，通過調用 callback(data:[]) 來返回它
    querySearch (queryString, cb) {
      var invoiceAccountHistory = this.getInvoiceAccountHistory()
      var results = queryString ? invoiceAccountHistory.filter(this.createFilter(queryString)) : invoiceAccountHistory
      cb(results)
    },
    createFilter (queryString) {
      return (invoiceAccount) => {
        return (invoiceAccount.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    // 存放查詢記錄
    handleSearchHistory () {
      let searchWordArray = localStorage.getItem('searchWord')
      searchWordArray = searchWordArray.split(',')
      if (searchWordArray.indexOf(this.protocolInfo.invoiceAccount) === -1) {
        searchWordArray.unshift(this.protocolInfo.invoiceAccount)
      }
      if (searchWordArray.length > 6) {
        searchWordArray.pop()
      }
      localStorage.setItem('searchWord', searchWordArray)
    },
    // 渲染歷史記錄
    getInvoiceAccountHistory () {
      let searchWordArray = localStorage.getItem('searchWord')
      searchWordArray = searchWordArray.split(',')
      let invoiceAccountHistory = []
      for (let i=0; i < searchWordArray.length; i++) {
        let item = {
          "value": searchWordArray[i],
          "label": searchWordArray[i]
        }
        invoiceAccountHistory.push(item)
      }
      return invoiceAccountHistory
    }
  }
}

頁面效果

Power By niaonao, The End