官方提供的范例只是输入项开头匹配才有建议项。
https://element.eleme.cn/#/zh-CN/component/input

实际使用调整一下更好用。

调整目标：
1.输入串与建议项有字符匹配就出现建议项
2.建议项按与输入高度相似降序排列
3.匹配字符串高亮显示

测试版本vue2

<el-autocomplete
   v-model="value"
   :fetch-suggestions="querySearch"
   placeholder="请输入"
   :trigger-on-focus="false"
   @select="handleSelect($event)"
 >
   >
   <template slot-scope="{ item }">
     <span v-html="brightenKeyword(item, value)" />
   </template>
 </el-autocomplete>

js

querySearch(queryString, cb) {
      var data = this.metricsLabelData
      var lowerQuery = queryString.toLowerCase()
      var results = queryString ? data.filter(this.createFilter(lowerQuery)) : data

      // 对结果进行排序：开头匹配 > 其他位置匹配 > 字母顺序
      if (queryString) {
        results.sort((a, b) => {
          const aLower = a.toLowerCase()
          const bLower = b.toLowerCase()

          // 检查是否开头匹配（优先级最高）
          const aStarts = aLower.startsWith(lowerQuery) ? 0 : 1
          const bStarts = bLower.startsWith(lowerQuery) ? 0 : 1
          if (aStarts !== bStarts) return aStarts - bStarts

          // 比较匹配位置（越靠前优先级越高）
          const aIndex = aLower.indexOf(lowerQuery)
          const bIndex = bLower.indexOf(lowerQuery)
          if (aIndex !== bIndex) return aIndex - bIndex

          // 比较字符串长度（越短匹配越精确）
          if (a.length !== b.length) return a.length - b.length

          // 最后按字母顺序排序
          return aLower.localeCompare(bLower)
        })
      }

      cb(results)
    },
    createFilter(queryString) {
      return (d) => {
        return d.toLowerCase().includes(queryString)
      }
    },
    handleSelect(item) {
      this.value = item
    },
    // 匹配项高亮显示
    brightenKeyword(val, keyword) {
      const Reg = new RegExp(keyword, 'i')
      if (val) {
        return val.replace(Reg, `<span style="color: #409EFF;">${keyword}</span>`)
      }
    }

测试建议部分数据：

this.metricsLabelData=[
    "application_ready_time_seconds",
    "application_started_time_seconds",
    "redis_uptime_in_seconds",
    "zk_up",
    "group",
    "mysql_up",
    "up"]

运行效果：