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: 2909222303@qq.com
* @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}

项目中遇到的问题

在我的一个项目中

<el-autocomplete class="inline-input" v-model="state1" :fetch-suggestions="querySearch"  
	 :trigger-on-focus="false" >
</el-autocomplete>

:trigger-on-focus="false" 引起的问题是，鼠标放进input框中不立刻弹出列表，输入内容过滤时才弹出列表。如果想让其弹出列表，需要:trigger-on-focus="true"