当前位置: 首页 > news >正文

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

在这里插入图片描述

查看本专栏目录


关于作者

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

热门推荐内容链接
1openlayers 从基础到精通,300+代码示例
2leaflet 热门分解学习教程,150+图文示例
3cesium 从0到1学习指南,200+代码示例
4 mapboxGL 从入门到实战,150+图文示例
5canvas 示例应用100+,揭密底层细节
6javascript从基础到高级,示例展示200+
7vue2 实战指南,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 提示文字出不来?修改支持模糊搜索提示

查看本专栏目录 关于作者 还是大剑师兰特&#xff1a;曾是美国某知名大学计算机专业研究生&#xff0c;现为航空航海领域高级前端工程师&#xff1b;CSDN知名博主&#xff0c;GIS领域优质创作者&#xff0c;深耕openlayers、leaflet、mapbox、cesium&#xff0c;canvas&#x…...

CentOS8 同步时间chrony ntpdate已无法使用

CentOS8系统中&#xff0c;原有的时间同步服务 ntp/ntpdate服务已经无法使用&#xff0c;使用yum安装&#xff0c;提示已不存在。 [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背景&#xff1a;现在做嵌入式开发&#xff0c;需要在板端挂载服务器&#xff0c;读取服务器文件。挂载中遇到该问题。 挂载命令长这样 mount -t nfs -o nolock (XXX.IP):/mnt/disk1/zixi01.ch…...

(Linux学习二)文件管理基础操作命令笔记

Linux目录结构&#xff1a; bin 二进制文件 boot 启动目录 home 普通用户 root 超管 tmp 临时文件 run 临时运行数据 var 日志 usr 应用程序、文件 etc 配置文件 dev 文件系统 一、基础操作 在 Linux 终端中&#xff0c;你可以使用以下命令来清屏&#xff1a; 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框架中&#xff0c;Bean是组成应用程序的核心单元。特别是在Spring Boot项目中&#xff0c;通过使用SpringApplication.run()方法启动应用后&#xff0c;我们可以获得一个ConfigurableApplicationContext实例&#xff0c;这个实例代表了整个应用程序的运行时环境…...

如何处理网络攻击对系统造成的损害?

网络攻击对系统造成的损害是当今企业面临的一大挑战。随着互联网的普及和数字化转型的加速&#xff0c;企业的运营越来越依赖于网络&#xff0c;但同时也面临着越来越多的网络安全威胁。一旦企业遭受网络攻击&#xff0c;其系统可能会遭受不同程度的损害&#xff0c;导致数据泄…...

数字IC后端设计利器 - 《Innovus的基本使用流程和命令》(附下载)

Innovus作为数字后端工具的后起之秀&#xff0c;在先进工艺下已经取得了令人瞩目的成就。其在Run time上的优势令人刮目&#xff0c;在timing、DRC、IR-drop上的结果更是让人竖起大拇指。 数字IC后端工程师学习Cadence公司的Innovus工具非常重要&#xff0c;因为Innovus是一款…...

Blender中四种不同的几何体类型(网格、曲线、体积和实例 )

网格、曲线、体积和实例是Blender中四种不同的几何体类型。它们各有特点&#xff0c;适用于不同的建模场景。 网格是由顶点、边和面组成的三维对象。它是Blender中最常用的几何体类型&#xff0c;可以用来创建各种模型&#xff0c;例如角色、场景、道具等。 曲线是一维对象&a…...

Vue3 学习笔记(Day5)

「写在前面」 本文为尚硅谷禹神 Vue3 教程的学习笔记。本着自己学习、分享他人的态度&#xff0c;分享学习笔记&#xff0c;希望能对大家有所帮助。推荐先按顺序阅读往期内容&#xff1a; 1. Vue3 学习笔记&#xff08;Day1&#xff09; 2. Vue3 学习笔记&#xff08;Day2&…...

【网络编程】实现服务器端和客户端的通讯的简单程序

套接字是什么&#xff1f; 服务端接受连接请求的套接字创建过程可分为以下4步&#xff1a; 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. 文件系统类型 不管使用什么文件系统&#xff0c;数据内容不会变化 不同的是&#xff0c;存储空间、大小、速度 3. MySQL存储引擎 可以理解为&#xff0c;MySQL的“文件系统”&#xff0c;只不过功能更加强大 4. MySQL…...

【查漏补缺你的Vue基础】Vue数据监听深度解析

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…...

大语言模型LLM发展历程中的里程碑项目:国内外技术革新重塑自然语言处理(LLM系列02)

文章目录 标题&#xff1a;大语言模型LLM发展历程中的里程碑项目&#xff1a;国内外技术革新重塑自然语言处理&#xff08;LLM系列02&#xff09; 引言早期奠基阶段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&#xff1a; 1、 终端设备必须有独立显卡。cmd窗口&#xff1a;nvidia-smi查看显卡信息 2、下载并安装CUDA Toolkit&#xff08;根据显卡下载对应的CUDA Toolkit软件&#xff09;、cuDNN&#xff08;根据CUDA版本下载对应的cuDNN&#xff0…...

List集合的Stream流式操作实现数据类型转换

问题现象&#xff1a; 最近在项目中&#xff0c;有一些逻辑想用List集合的Stream流式操作来快速实现&#xff0c;但由于之前没做好学习笔记和总结&#xff0c;导致一时间想不起来&#xff0c;只能用本方法来解决&#xff0c;如下&#xff1a; 可以看出来代码量是比较冗长的&…...

Path of Building终极指南:流放之路离线构建规划器深度解析

Path of Building终极指南&#xff1a;流放之路离线构建规划器深度解析 【免费下载链接】PathOfBuilding Offline build planner for Path of Exile. 项目地址: https://gitcode.com/GitHub_Trending/pa/PathOfBuilding Path of Building&#xff08;简称PoB&#xff09…...

OP-TEE安全存储深度解析(一):密钥体系与文件加密流程

1. OP-TEE安全存储的核心价值 第一次接触OP-TEE的安全存储功能时&#xff0c;我完全被它的精妙设计震撼到了。想象一下&#xff0c;你的手机里存着指纹、人脸识别模板这些极度敏感的数据&#xff0c;如果这些信息被普通应用程序随意读取&#xff0c;后果简直不堪设想。而OP-TEE…...

如何用MTB Nodes轻松制作专业级ComfyUI动画:免费开源终极指南

如何用MTB Nodes轻松制作专业级ComfyUI动画&#xff1a;免费开源终极指南 【免费下载链接】comfy_mtb Animation oriented nodes pack for ComfyUI 项目地址: https://gitcode.com/gh_mirrors/co/comfy_mtb 想用ComfyUI创作惊艳动画却不知从何开始&#xff1f;MTB Nodes…...

ABTestingGateway扩展开发教程:如何添加新的自定义分流方式

ABTestingGateway扩展开发教程&#xff1a;如何添加新的自定义分流方式 【免费下载链接】ABTestingGateway 项目地址: https://gitcode.com/gh_mirrors/ab/ABTestingGateway ABTestingGateway是一款基于Nginx-Lua的动态分流系统&#xff0c;通过灵活的策略配置实现请求…...

终极游戏存档备份方案:Ludusavi让你的游戏进度永不丢失 [特殊字符]

终极游戏存档备份方案&#xff1a;Ludusavi让你的游戏进度永不丢失 &#x1f3ae; 【免费下载链接】ludusavi Backup tool for PC game saves 项目地址: https://gitcode.com/gh_mirrors/lu/ludusavi 你是否曾因系统重装、硬盘故障或意外删除而失去宝贵的游戏进度&#…...

突破性开源机器人框架:3大创新模块重构智能机械臂开发体验

突破性开源机器人框架&#xff1a;3大创新模块重构智能机械臂开发体验 【免费下载链接】lerobot &#x1f917; LeRobot: Making AI for Robotics more accessible with end-to-end learning 项目地址: https://gitcode.com/GitHub_Trending/le/lerobot 在机器人技术快速…...

Midscene.js实战指南:5分钟掌握AI视觉驱动自动化测试

Midscene.js实战指南&#xff1a;5分钟掌握AI视觉驱动自动化测试 【免费下载链接】midscene AI-powered, vision-driven UI automation for every platform. 项目地址: https://gitcode.com/GitHub_Trending/mid/midscene Midscene.js是一款革命性的AI视觉驱动自动化测试…...

从Win32 API到ACLLib:浙大翁恺老师如何为C语言初学者‘封装’出一个图形库?

从Win32 API到ACLLib&#xff1a;C语言图形编程的教学革命 在计算机科学教育的漫长河流中&#xff0c;C语言始终扮演着基石的角色。但当教学触及图形界面编程时&#xff0c;传统的Win32 API就像一道陡峭的悬崖&#xff0c;让无数初学者望而却步。浙大翁恺老师团队开发的ACLLib&…...

用STM32和TFT屏做个点菜机:从硬件接线到菜单逻辑的完整实战(附源码)

STM32TFT点菜机实战&#xff1a;从硬件搭建到交互逻辑的全流程解析 在餐饮行业数字化转型的浪潮中&#xff0c;自助点餐终端正逐渐取代传统纸质菜单。对于嵌入式开发者而言&#xff0c;用STM32微控制器搭配TFT液晶屏打造一套点菜系统&#xff0c;不仅能巩固硬件驱动开发能力&am…...

Colab进阶指南:解锁免费GPU,高效部署你的Keras与PyTorch项目

1. 为什么你需要Colab的免费GPU&#xff1f; 如果你正在学习深度学习或者从事AI项目开发&#xff0c;肯定对GPU的重要性深有体会。传统CPU训练一个简单的图像分类模型可能需要几个小时甚至几天&#xff0c;而一块普通的GPU可能只需要几分钟。但问题是&#xff0c;高性能GPU价格…...