VUE中模糊搜索框，并同时获取key和value实现

可以使用element UI的带输入建议el-autocomplete

引用el-autocomplete

<el-form-item label="搜索框" prop="inputValue">
  <el-autocomplete
    v-model="inputValue"
    :fetch-suggestions="querySearch"
    placeholder="请输入关键词"
    size="small"
    @select="handleSelect"
  >
  </el-autocomplete>
</el-form-item>

querySearch(inputValue, callback) {
    let list = []
    //请求接口
    querySearchApi(inputValue).then((res) => {
     if (res.success) {
       list = res.data
       if (list && list.length > 0) {
         list.forEach(l => {
              l['value'] = l.value
         })
       }
     }
     callback(list)
  }).catch(() => {
     this.$message({
        type: 'error',
       message: '获取信息失败！'
     })
    callback(list)
  })
},

handleOwnerSelect(item) {
    this.inputValue = item.value
    this.key = item.key
},

 v-model="inputValue" ：与inputValue绑定值，回显自动绑定，自动输入建议的值可以传递给querySearch方法作为参数。

:fetch-suggestions="querySearch" ： 返回输入建议的方法，也就是说输入框一获取焦点。就会自动调用该方法拿到数据，这些数据就是输入建议的数据。

@select="handleSelect" ： 当选中建议项时，获取选中的key和value。