el-input可输入内容也可下拉选择功能实现

效果描述：el-input可输入内容也可下拉选择功能实现，像百度搜索功能

 <el-autocomplete
              style="width: 350px; margin-right: 10px"
              v-model="keyword"
              :fetch-suggestions="querySearchAsync"
              placeholder="请输入/选中回款单位"
              @select="handleSelect"
              :trigger-on-focus="false"
              :clearable="true"
              :popper-class="noData ? 'platform-auto-complete' : ''"
            >
              <template v-if="noData" slot-scope="{ item }">
                <div class="default">{{ item.default }}</div>
              </template>
 </el-autocomplete>

 data() {
    return {
      timeout: null,
      keyword: "",
      noData: false, // 是否匹配到数据了

    };
  },
 methods:{
   querySearchAsync(queryString, cb) {
      clearTimeout(this.timeout);
      var results = [];
      if (queryString == "") {
        cb(results);
      } else {
        // this.timeout = setTimeout(() => {
        const obj = {
          hospitalId: this.$store.state.hospitalId,
          name: queryString,
        };
        bankOption(obj).then((res) => {
          if (res.code == 200) {
            var result = res.data;
            //循环放到一个远程搜索需要的数组
            for (let i = 0; i < result.length; i++) {
              const element = result[i];
              results.push({
                value: element,
              });
            }
            this.noData = false;
            if (result.length === 0) {
              results = [{ default: "无匹配数据" }];
              this.noData = true;
            }
            cb(results);
          } else {
            this.noData = true;
            results = [{ default: "无匹配数据" }];
            cb(results);
          }
        });
        // }, 1500);
      }
    },
    createStateFilter(queryString) {
      return (state) => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1
        );
      };
    },
    //选择联想关键词时触发
    async handleSelect(val) {
      this.keyword = val.value;
    },
 }

<style>
.platform-auto-complete {
  .el-autocomplete-suggestion__wrap {
    padding: 5px 0;
    ul li {
      pointer-events: none; // 阻止可点击事件
      .default {
        text-align: center;
        color: #999;
      }
      &:hover {
        background-color: #fff;
      }
    }
  }
}
</style>