基于vue3 el-autocomplete实现远程搜索功能

1，实现效果

2，实现代码
使用elementui input组件
autocomplete 是一个可带输入建议的输入框组件，fetch-suggestions 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。

HTML部分代码

<el-autocomplete
              :fetch-suggestions="querySearch"
              v-model="ruleForm.name"
              @select="handlename"
              :trigger-on-focus="false"
              style="width: 100%"
            >
</el-autocomplete>

js部分代码

async function querySearch(queryString, callBack) {
 //调取后台接口数据
  const [err, data] = await get_getDictEng(modelValue.value)
  if (!err) {
    data.forEach((el) => {
      listValue.value.push({
        label: el.nameChn,
        value: el.nameEng
      })
    })
  }
  if (queryString) {
    //对比过滤出包含的数据
    let list = queryString ? listValue.value.filter(createFilter(queryString)) : listValue.value
    callBack(list)
  }
}

function createFilter(queryString) {
  //判断是否包含
  return (restaurant) => {
    return restaurant.value.indexOf(queryString) > -1
  }
}