el-autocomplete 提示文字出不来？修改支持模糊搜索提示

查看本专栏目录

关于作者

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信，一起交流。

热门推荐	内容链接
1	openlayers 从基础到精通，300+代码示例
2	leaflet 热门分解学习教程，150+图文示例
3	cesium 从0到1学习指南，200+代码示例
4	mapboxGL 从入门到实战，150+图文示例
5	canvas 示例应用100+，揭密底层细节
6	javascript从基础到高级，示例展示200+
7	vue2 实战指南，100+个细节深度剖析

在做项目的时候，时常会使用element-ui中的el-autocomplete 标签完成一个带输入建议的输入框，但是容易疏忽的问题是提示性的文字出不来，什么原因呢？ 请看示例。 未改变数据前，文字出不来，改变数据结构后，文字可以出来。 同时这里做了改变，支持模糊性搜索提示文字。

示例效果图

示例源代码

/*
* @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）
* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: [e-mail]
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2024-02-29
*/<template><div class="djs-box"><div class="topBox"><h3>el-autocomplete 提示文字出不来？修改支持模糊文字提示</h3><div>大剑师兰特, 还是大剑师兰特，gis-dajianshi</div><h4><el-button type="primary" size="mini" @click="changeArray()"> 变换数据格式</el-button></h4></div><div class="dajianshi" id="dajianshi"><el-autocomplete class="inline-input" v-model="state1" :fetch-suggestions="querySearch" placeholder="请输入内容"></el-autocomplete></div></div>
</template><script>export default {data() {return {state1: '',restaurants: [{"name": "三全鲜食（北新泾店）","address": "长宁区新渔路144号"},{"name": "Hot honey 首尔炸鸡（仙霞路）","address": "上海市长宁区淞虹路661号"},{"name": "唦哇嘀咖","address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元"},{"name": "爱茜茜里(西郊百联)","address": "长宁区仙霞西路88号1305室"},{"name": "爱茜茜里(近铁广场)","address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺"},{"name": "鲜果榨汁（金沙江路和美广店）","address": "普陀区金沙江路2239号金沙和美广场B1-10-6"},{"name": "开心丽果（缤谷店）","address": "上海市长宁区威宁路天山路341号"},{"name": "超级鸡车（丰庄路店）","address": "上海市嘉定区丰庄路240号"}],}},mounted() {},methods: {//用于更改restaurants数据的格式。changeArray() {   this.restaurants = this.restaurants.map((item) => {return {value: item.name}})},//，它根据输入的查询字符串过滤餐厅数据，并通过回调返回建议列表。querySearch(queryString, cb) { var restaurants = this.restaurants;var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;cb(results);},//创建过滤函数的方法，用于在查询时进行模糊匹配。createFilter(queryString) {return (restaurant) => {return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1);};},}}
</script>
<style scoped>.djs-box {width: 1000px;height: 650px;margin: 50px auto;border: 1px solid black;}.topBox {margin: 0 auto 0px;padding: 10px 0 20px;background: black;color: #fff;}.dajianshi {width: 93%;height: 400px;margin: 5px auto 0;border: 1px solid #369;background-color: cde;padding: 20px;}
</style>

支持模糊搜索的方法

官网上： 第一个字或者字母匹配

return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase())===0);

这里修改为：

return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1);

不显示建议文字的原因

输入建议的数据必须为对象数组（data=[{}, {}, {}…]），且 对象必须包含“value”: “xxx”键值对 ，比如：{“value”: item.name}，当然也可以添加其他内容：{“value”: item.name, “id”: item.id}