ElementUi使用el-autocomplete实现搜索建议（无数据匹配+点击clearable清除，不触发下拉选项）

先上效果图：
首先没输入的情况下是这样

如果有匹配选项是这样

匹配不到是这样

在使用过程中发现，element的el-autocomplete组件是不支持没有数据的时候提示无匹配数据的，如果要设置成可关闭的，发现点击关闭后，如果还是在聚焦状态，再次输入是不触发输入建议的，如下图：

代码如下：

     <el-form-item label="平台名称">
       <el-autocomplete
         ref="el_auto" // 为了解决关闭后不匹配
         v-model="platformName"
         :fetch-suggestions="querySearch"
         :trigger-on-focus="false"
         :clearable="true"
         :popper-class="noData ? 'platform-auto-complete' : ''"         
         value-key="platformName" // 输入建议对象中用于显示的键名,默认是value
         class="inline-input"
         placeholder="请输入上报平台关键字"
         @select="handleSelect"
         @clear="clearSelect"
       >
       // 解决匹配不到提示无匹配数据
         <template v-if="noData" slot-scope="{ item }">
           <div class="default">{{ item.default }}</div>
         </template>
       </el-autocomplete>
     </el-form-item>

  data(){
    return{
      platformName:'',
      platformList: [], // 平台列表
      noData: false // 是否匹配到数据了
    }
  },
  methods:{
      querySearch(queryString, callback) {
      let matchResults = queryString ? this.platformList.filter(this.createFilter(queryString)) : this.platformList;
      this.noData = false
      if (matchResults.length === 0) {
        matchResults = [{default: '无匹配数据'}]
        this.noData = true
      }
      // 调用 callback 返回建议列表的数据
      callback(matchResults);
    },
    createFilter(queryString) {
      return platform => {
        return (
          platform.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1
        );
      };
    },
    handleSelect(val) {
      this.searchForm.platformId = val.platformId
    },
    // 看element源码发现，在点击关闭时，发现把activated 置为false了
    clearSelect() {
      this.$refs.el_auto.activated = true
      // 方法二:让输入框失去焦点
      // document.activeElement.blur()     
    }
  }

这里说一下：对于点击关闭后，再次输入触发不了输入建议，是因为elementui源码有bug,图片如下：

解决主要有两种思路：第一种是给组件添加一个ref,在执行清除事件的时候，把activated置为true
第二种就是让输入框失去焦点,就是document.activeElement.blur()

activeElement 属性返回文档中当前获得焦点的元素。

另外：还需要给无匹配数据时修改样式，要不然就是可点击的，图片如下：

<style lang="scss">
.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;
      }
    }
  }
}

另外用这个组件还需要注意，如果el-autocomplete接受的数组对象里面没有value属性，就需要用value-key（输入建议对象中用于显示的键名）可以指定对应的key，如果不用value-key,那就需要处理数组，给数组加上一个value的key，要不然输入建议显示不出来，如下图