【Element plus】autodcomplete 远程搜索、模糊搜索

输入1时，可直接用1作为搜索关键字，也可以选择选项123将123作为搜索关键字

 

 

tamplate模块

<el-autocomplete
    v-model="state.RWMC"
    :fetch-suggestions="rwquerySearch"
    placeholder="关键字匹配"
/>

 js模块

const state = reactive({
    timeout:  null,
    RWMC:"",
})

//获取输入建议的方法,回调函数返回
const querySearch = async (queryString, cb) => {
    clearTimeout(state.timeout);
    var results = []
    if (queryString == '') {
      cb(results);
    } else {
    //掉接口需要的参数
    let find = {
      name: queryString, //上面输入框绑定的数据
    };
    try {
      // 请求后端的接口数据赋值给result
      let result = [{ id: 1, name: "123" },{id:2, name:"1111"}]
      if (result) {
          //循环放到一个远程搜索需要的数组
          for (let i = 0; i < result.length; i++) {
            const element = result[i];
            results.push({
              value: element.name,
              id: element.id
            })
        }
          cb(results);
      } else {
          results = []
          cb(results);
        }
    } catch (error) {
      console.log(error);
    }
   }
}