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 提示文字出不来?修改支持模糊搜索提示
查看本专栏目录 关于作者 还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;CSDN知名博主,GIS领域优质创作者,深耕openlayers、leaflet、mapbox、cesium,canvas&#x…...
CentOS8 同步时间chrony ntpdate已无法使用
CentOS8系统中,原有的时间同步服务 ntp/ntpdate服务已经无法使用,使用yum安装,提示已不存在。 [rootlocalhost ~]# cat /etc/redhat-release CentOS Linux release 8.1.1911 (Core) [rootlocalhost ~]# yum install ntp 上次元数据过期检查…...
NFS服务器挂载失败问题
问题 mount.nfs: requested NFS version or transport protocol is not supported背景:现在做嵌入式开发,需要在板端挂载服务器,读取服务器文件。挂载中遇到该问题。 挂载命令长这样 mount -t nfs -o nolock (XXX.IP):/mnt/disk1/zixi01.ch…...
(Linux学习二)文件管理基础操作命令笔记
Linux目录结构: bin 二进制文件 boot 启动目录 home 普通用户 root 超管 tmp 临时文件 run 临时运行数据 var 日志 usr 应用程序、文件 etc 配置文件 dev 文件系统 一、基础操作 在 Linux 终端中,你可以使用以下命令来清屏: clear 命令&am…...
Docker本地部署GPT聊天机器人并实现公网远程访问
文章目录 前言1. 拉取相关的Docker镜像2. 运行Ollama 镜像3. 运行Chatbot Ollama镜像4. 本地访问5. 群晖安装Cpolar6. 配置公网地址7. 公网访问8. 固定公网地址9. 结语 前言 随着ChatGPT 和open Sora 的热度剧增,大语言模型时代,开启了AI新篇章,大语言模型的应用非常广泛&…...
html2canvas + JsPDF.js 导出pdf分页时的问题
问题描述 前一段时间 实现了html2canvas jspdf.js 导出pdf的功能 项目当时没有测试做完就先搁置 最近项目要上线发现分页时问题 这篇文章记录一下之前的bug import html2canvas from html2canvas; import JsPDF from jspdf export function savePdf(el, title) {html2canva…...
Linux系统Docker部署StackEdit Markdown并实现公网访问本地编辑器
文章目录 前言1. ubuntu安装VNC2. 设置vnc开机启动3. windows 安装VNC viewer连接工具4. 内网穿透4.1 安装cpolar【支持使用一键脚本命令安装】4.2 创建隧道映射4.3 测试公网远程访问 5. 配置固定TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址5.3 测试…...
从Spring Boot应用上下文获取Bean定义及理解其来源
前言 在Spring框架中,Bean是组成应用程序的核心单元。特别是在Spring Boot项目中,通过使用SpringApplication.run()方法启动应用后,我们可以获得一个ConfigurableApplicationContext实例,这个实例代表了整个应用程序的运行时环境…...
如何处理网络攻击对系统造成的损害?
网络攻击对系统造成的损害是当今企业面临的一大挑战。随着互联网的普及和数字化转型的加速,企业的运营越来越依赖于网络,但同时也面临着越来越多的网络安全威胁。一旦企业遭受网络攻击,其系统可能会遭受不同程度的损害,导致数据泄…...
数字IC后端设计利器 - 《Innovus的基本使用流程和命令》(附下载)
Innovus作为数字后端工具的后起之秀,在先进工艺下已经取得了令人瞩目的成就。其在Run time上的优势令人刮目,在timing、DRC、IR-drop上的结果更是让人竖起大拇指。 数字IC后端工程师学习Cadence公司的Innovus工具非常重要,因为Innovus是一款…...
Blender中四种不同的几何体类型(网格、曲线、体积和实例 )
网格、曲线、体积和实例是Blender中四种不同的几何体类型。它们各有特点,适用于不同的建模场景。 网格是由顶点、边和面组成的三维对象。它是Blender中最常用的几何体类型,可以用来创建各种模型,例如角色、场景、道具等。 曲线是一维对象&a…...
Vue3 学习笔记(Day5)
「写在前面」 本文为尚硅谷禹神 Vue3 教程的学习笔记。本着自己学习、分享他人的态度,分享学习笔记,希望能对大家有所帮助。推荐先按顺序阅读往期内容: 1. Vue3 学习笔记(Day1) 2. Vue3 学习笔记(Day2&…...
【网络编程】实现服务器端和客户端的通讯的简单程序
套接字是什么? 服务端接受连接请求的套接字创建过程可分为以下4步: 1、调用socket创建套接字 2、调用bind函数分配IP地址和端口号 3、调用listen函数转换为可接受请求状态 4、调用accept函数受理连接请求 1、调用socket创建套接字 serv_sock soc…...
如何在Portainer中部署Nginx容器并制作一个本地站点结合cpolar发布至公网可访问
文章目录 前言1. 安装Portainer1.1 访问Portainer Web界面 2. 使用Portainer创建Nginx容器3. 将Web静态站点实现公网访问4. 配置Web站点公网访问地址4.1公网访问Web站点 5. 固定Web静态站点公网地址6. 固定公网地址访问Web静态站点 前言 Portainer是一个开源的Docker轻量级可视…...
Mysql的储存引擎
储存引擎介绍 1. 文件系统 操作系统存取数据的一种机制 2. 文件系统类型 不管使用什么文件系统,数据内容不会变化 不同的是,存储空间、大小、速度 3. MySQL存储引擎 可以理解为,MySQL的“文件系统”,只不过功能更加强大 4. MySQL…...
【查漏补缺你的Vue基础】Vue数据监听深度解析
🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…...
大语言模型LLM发展历程中的里程碑项目:国内外技术革新重塑自然语言处理(LLM系列02)
文章目录 标题:大语言模型LLM发展历程中的里程碑项目:国内外技术革新重塑自然语言处理(LLM系列02) 引言早期奠基阶段Transformer架构引领变革GPT系列的重大进展国内外标志性LLM项目LLM在中国的应用实践LLM研究面临的挑战与应对策略…...
JS二进制文件转换:File、Blob、Base64、ArrayBuffer
类型转换 1. Blob、File → Base64 function fileToDataURL(file) {let reader new FileReader();reader.readAsDataURL(file);reader.onload function (e) {return reader.result;}; }2. Base64 → Blob、File // Base64 转为 Blob function dataURLToBlob(fileDataURL) …...
编译opencv gpu版的条件
一、具备以下条件即可编译opencv gpu: 1、 终端设备必须有独立显卡。cmd窗口:nvidia-smi查看显卡信息 2、下载并安装CUDA Toolkit(根据显卡下载对应的CUDA Toolkit软件)、cuDNN(根据CUDA版本下载对应的cuDNN࿰…...
List集合的Stream流式操作实现数据类型转换
问题现象: 最近在项目中,有一些逻辑想用List集合的Stream流式操作来快速实现,但由于之前没做好学习笔记和总结,导致一时间想不起来,只能用本方法来解决,如下: 可以看出来代码量是比较冗长的&…...
如何将中国行政区划数据迁移到MySQL数据库?
如何将中国行政区划数据迁移到MySQL数据库? 【免费下载链接】Administrative-divisions-of-China 中华人民共和国行政区划:省级(省份)、 地级(城市)、 县级(区县)、 乡级(…...
从NOIP真题到算法实战:一元三次方程求解的二分法精讲
1. 从NOIP真题看一元三次方程求解的重要性 第一次接触NOIP真题的同学可能会好奇,为什么一元三次方程求解会成为竞赛中的经典题目?这背后其实隐藏着算法竞赛考察的核心能力——数值计算与算法思维的结合。在2001年NOIP提高组的真题中,这道题就…...
终极FanControl中文配置指南:3步实现Windows智能风扇控制
终极FanControl中文配置指南:3步实现Windows智能风扇控制 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_Trending…...
db-migrate错误处理与调试:常见问题排查完全指南
db-migrate错误处理与调试:常见问题排查完全指南 【免费下载链接】node-db-migrate Database migration framework for node 项目地址: https://gitcode.com/gh_mirrors/no/node-db-migrate 在开发过程中,数据库迁移是项目迭代的重要环节…...
AMWaveTransition扩展应用:如何适配CollectionView与其他UI组件
AMWaveTransition扩展应用:如何适配CollectionView与其他UI组件 【免费下载链接】AMWaveTransition Custom transition between viewcontrollers holding tableviews 项目地址: https://gitcode.com/gh_mirrors/am/AMWaveTransition AMWaveTransition是一款为…...
上交大与清华等突破:AI实现数据库自动技能扩展准确率提升突破
这项由上海交通大学主导,联合清华大学、新加坡国立大学以及蚂蚁集团共同开展的研究,发表于2026年6月的ACM数据管理顶级期刊《Proceedings of the ACM on Management of Data》第4卷第3期(SIGMOD 2026),论文编号为Artic…...
深度解析:SensitivityMatcher如何通过多周期监控算法实现跨游戏鼠标灵敏度精准转换
深度解析:SensitivityMatcher如何通过多周期监控算法实现跨游戏鼠标灵敏度精准转换 【免费下载链接】SensitivityMatcher Script that can be used to convert your mouse sensitivity between different 3D games. 项目地址: https://gitcode.com/gh_mirrors/se/…...
如何用Stretchly打造健康工作习惯:休息提醒工具的完整使用指南
如何用Stretchly打造健康工作习惯:休息提醒工具的完整使用指南 【免费下载链接】stretchly The break time reminder app 项目地址: https://gitcode.com/gh_mirrors/st/stretchly 在现代数字工作环境中,长时间盯着电脑屏幕已成为常态,…...
别再死记硬背公式了!用Halcon+C#手把手搞定机器人九点标定(附完整代码与调试技巧)
HalconC#实战:机器人九点标定的工程化实现与避坑指南 在工业自动化领域,视觉引导机器人作业已成为提升生产效率的关键技术。而实现这一技术的核心环节,就是建立相机像素坐标系与机器人物理坐标系之间的精确映射关系——也就是我们常说的九点标…...
CompressO:如何在本地设备上安全高效地压缩视频与图片文件
CompressO:如何在本地设备上安全高效地压缩视频与图片文件 【免费下载链接】compressO Convert any video/image into a tiny size. 100% free & open-source. Available for Mac, Windows & Linux. 项目地址: https://gitcode.com/gh_mirrors/co/compres…...
