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