vue实现带输入建议的 el-autocomplete 远程搜索下拉框

需求描述： 有一个搜索用的输入框(需要绑定value和显示的label不一致的请使用select组件)，激活即列出输入建议，并且输入后下拉框选择项匹配输入建议

使用组件

<h-page-search-item label="房间">
  <el-autocomplete
    v-model="roomName"
    :fetch-suggestions="querySearch"
    :clear-icon-click="clearSearch"
    :props="{ value: 'roomName' }"
    placeholder="请输入"
    @select="handleSelect"
  />
</h-page-search-item>

根据输入内容提供对应的输入建议： autocomplete 是一个可带输入建议的输入框组件，fetch-suggestions 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中

输入框获取焦点时调用方法，从接口获取数据

querySearch(queryString, callback) {
  api.getRoomList({
    roomName: queryString,
    ...
  })
  .then(res => {
    const { code, data } = res
    if (Number(code) !== 0 || !data) {
      return
    }
    callback(data.list || [])
  })
},

点击选中建议项时触发，调用该方法获取选中项。后续可以获取this.selectedRoom.roomCode进行查询等操作

handleSelect(item) { this.selectedRoom = item },

 

清空选中项 

clearSearch() {
  this.selectedRoom = {}
},