这样做网站推广深圳定制网站制作厂家

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

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

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

测试版本vue2

<el-autocompletev-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.metricsLabelDatavar 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 : 1const bStarts = bLower.startsWith(lowerQuery) ? 0 : 1if (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"]

运行效果：