element ui自动补全

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

el-autocomplete的使用细节

前言

本文记录一下el-autocomplete的使用和两个常见的问题

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、使用

1.html

代码如下（示例）：

      <el-autocomplete
      :fetch-suggestions="querySearch"
      v-model="data.pharName"
      @select="handleSelect"
      :debounce="0"
      :trigger-on-focus="true"
      clearable
      @clear="blurForBug()"
    ></el-autocomplete> 

2.js

代码如下（示例）：

//自动匹配 输入框获取焦点时调用的方法
function querySearch(queryString, cb){ // queryString是用户输入的想要查询的内容，cb是回调函数（可以发请求获取数据）
      console.log("如何触发", queryString, cb);
      if (queryString == "") {
        cb([{ value: "历史一" }, { value: "历史二" }]); // 当然这里的历史记录是后端返给我们的，应该为接口返回的数据
      } else {
        let apiResult = [
          {
            value: "12",
          },
          {
            value: "13",
          },
        ];
        // 这里我们模拟从后端的接口异步获取的数据
        setTimeout(() => {
          // cb([])    cb函数如果返回一个空数组的话，那个模糊搜索输入建议的下拉选项因为length为0就会消失了
          cb(apiResult);
        }, 500);
      }
  }
  //输入框失去焦点
  function  blurForBug(){
      document.activeElement.blur();
    }

---