el-autocomplete 配合 @keyup.enter.native 使用时，无法关闭搜索建议弹框问题解决方案

el-autocomplete 配合 @keyup.enter.native 使用时，无法关闭搜索建议弹框问题解决方案

1. 使用场景，本人使用element ui 时由于业务需求，需要用到一个搜索业务，看着 el-autocomplete 这个组件感觉蛮适合的，于是便踩入这个坑中。因为需要同时存在搜索建议列表和点击enter跳转搜索结果页需求，使用enter点击跳转后，无法在跳转完成时隐藏掉之前的搜索建议，通过鼠标点击其他元素却可以关闭，开始以为是因为 input 的 focus 问题，便写了一个隐藏的input框，在enter事件后 focus 在隐藏的input 中，结果仍然不行，搜索建议结果依旧坚挺。此时，经过我查看文档，反复观察，也么有提供方法进行手动关闭的选项。然后就想着，这个组件设计是不是跟我一样是个菜鸟程序猴，没考虑到这方面的问题，再一想，不对。想到一句至理名言，当有疑惑时，请仔细阅读文档。然后！结果来了！
2. :fetch-suggestions="querySearch" 这个属性提供了很大的操作空间，fetch-suggestions 返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它,
3. 在 querySearch(queryString,cb) 中，判断当前 queryString 是否为true， 为 true 时触发enter事件，不调用 cb() 回调函数，便没有了搜索建议，便看不见了，为 false 时代表是正在输入搜索关键词，执行搜索请求接口，并调用 cb() 函数。就是这么简单，下面上源码示例：

 <el-autocomplete
        class="inline-input"
        v-model="searchWord"
        :fetch-suggestions="querySearch"
        placeholder="WHAT ARE YOU LOOKING FOR?"
        @select="handleSelect"
        :trigger-on-focus="false"
        :select-when-unmatched="true"
        popper-class="search-wrap"
        @keyup.enter.native="handleSearch"
      >
        <template slot-scope="{ item }">
          <div class="c6 size13" @click="searchTag(item)" v-html="includeWord(item.spuTitle) "></div>
        </template>
      </el-autocomplete>

```javascript
  // 输入查询关键词时的触发器
    querySearch(queryString, cb) {
      if (!queryString) {
        // 仅为输入时的搜索
        this.searchByKeyWord(cb);
      } else {
        // 输入完成时的点击enter事件后触发的，需配合 el的 :select-when-unmatched="true" 同时使用
        this.handleSearch();
      }
    },
     // 输入时进行检索
    searchByKeyWord(cb) {
      if (!this.searchWord || this.searchWord.length < 2) {
        // 如果搜索关键词长度小于2时不进行检索
        return false;
      }
      clearInterval(this.timer);
      this.timer = setTimeout(() => {
        let params = {
          sysType: 1, //系统类型 1 - PC
          keyWord: this.searchWord.trim(), // 关键词
          deviceType: 6, // 设备类型 6 - PC
          pageLocation: this.$route.path // 搜索所在页面
        };
        this.$req.shopSearchByKeyword(params).then(res => {
          if (res.code == 0) {
            this.restaurants = res.data;
            cb(this.restaurants);
          }
        });
      }, 200);
    }

关机，下班！

那是不可能这么嚣张的。