vue 前端 模糊查询 el-autocomplete

<el-autocomplete
          clearable
          @clear="setBlur()"
          @input="handle"
          :fetch-suggestions="querySearch"
          :trigger-on-focus="false"
          @select="handleSelect"
          class="inline-input"
          v-model="listQuery.fanType"
          placeholder="请输入内容"
        ></el-autocomplete>

methods:{
    setBlur() {
      //  在点击由 clearable 属性生成的清空按钮时，主动触发失去焦点，解决‘fetch-suggestions’输入建议不提示的bug
      document.activeElement.blur()
    },
    // 清空输入框页面重置
    handle(val) {
      if (val === '') {
        this.getData() // 页面重置的代码
      }
    },
    // 过滤项目和class
    async querySearch(queryString, cb) {
        if (queryString && queryString.length > 0) {
          this.listQuery.fanType = queryString
          try {
            const data = await getAlllist(this.listQuery.fanType) // search定义在data里
          // 赋值给建议列表，渲染到页面
            var list = data.resultObj
            // 如果list.length等于0，则代表没有匹配到结果。手动给list添加一条提示信息
            if (!this.listQuery.fanType) {
              list.push({
                id: '-1',
                value: '无匹配结果'
             })
            // 调用 callback 返回建议列表的数据
              cb(list)
            } else {
              list = list.map(item => {
              return {
                value: `${item.fanType}`,
                id: `${item.id}`
              }
             })
             list = list.filter(item => {
               return item.value.indexOf(this.listQuery.fanType) > -1
             })
            // 调用 callback 返回建议列表的数据
             cb(list)
            }
          } catch (error) {
            console.log(error)
          }
        }
     },
    // 选中 input 提示的某一条
    async handleSelect(item) {
      // item.id等于 -1时，代表没有匹配到任何结果
      if (item.id !== -1) {
        this.listQuery.fanType = item.value
        const data = await getAllmodel(this.listQuery)
        this.tableData = data.resultObj.data // 拿到数据进行渲染
      }
    },
}