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

在Element UI中，使用el-autocomplete组件时，如果你想要添加无数据匹配时的提示信息，并且希望能够使用clearable特性清除已输入的内容，你需要监听clear事件并在事件处理函数中处理无数据匹配的逻辑。

以下是一个简单的例子，展示了如何实现这个功能：

<template>
  <el-autocomplete
    v-model="state.searchText"
    :fetch-suggestions="querySearch"
    placeholder="请输入内容"
    @clear="handleClear"
    clearable>
  </el-autocomplete>
</template>
 
<script>
  import { reactive, toRefs } from 'vue';
  export default {
    setup() {
      const state = reactive({
        searchText: '',
        suggestions: ['测试1', '测试2', '测试3']
      });
 
      // 监听clear事件
      const handleClear = () => {
        state.searchText = '';
      };
 
      // 模拟查询方法
      const querySearch = (queryString, cb) => {
        let results = state.suggestions.filter(item => {
          return item.includes(queryString.trim());
        });
        // 如果没有匹配项，显示提示信息
        if (results.length === 0) {
          results.push('无数据匹配');
        }
        cb(results);
      };
 
      return { ...toRefs(state), querySearch, handleClear };
    }
  };
</script>

在这个例子中，我们定义了一个querySearch方法来模拟查询数据，并在方法中处理无数据匹配的逻辑。当用户清除输入时，handleClear方法会被调用，我们在这个方法中将searchText设置为空字符串，以清除提示信息。这样，无论是否有数据匹配，都不会触发clear事件外的其他问题。