ElementUi el-autocomplete 踩坑 （使用clearable清除,点击输入框下拉条件不再显示）

最新推荐文章于 2025-06-05 16:04:39 发布
原创 最新推荐文章于 2025-06-05 16:04:39 发布 · 2.7k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#爬虫 #python #开发语言

在使用ElementUi的el-autocomplete组件进行模糊搜索时，添加clearable属性后遇到一个问题：点击清除图标并保持聚焦状态，再次点击输入框下拉条件不再显示。原因是element-ui源码bug，激活状态未正确设置。解决方案包括设置activated属性为true或使输入框失去焦点。这里介绍了两种方法，并提醒el-autocomplete的value-key属性可以避免额外的数据转换。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

今天在写组件的时候，用到了el-autocomplete来做模糊搜索。因为要可以清除条件，所以加了clearable属性，然后遇到了个bug。点击清除图标后，如果你已经是聚焦状态了，你在点击输入框，下拉框不会再显示了

在这里插入图片描述
查了一下，是因为有element-ui源码有bug，主要原因是

参考该博客

autocomplete组件在执行清除事件时，将activated置为false。这时候下拉框不会显示了，而在querySearch执行成功后又没有将activated置为true。所以导致了该bug。解决的核心思路就是想办法把this.activated的值设置为true。或者是清除完后让输入框失

最低0.47元/天 解锁文章

200万优质内容无限畅学
Element-UI el-autocomplete带输入建议的输入框组件
一碗清深的博客
04-18 1237
el-autocomplete 是一个可带输入建议的输入框组件，fetch-suggestions 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 el-autocomplete 组件中。
解决element-plus加了clearable导致input宽度一直变化的问题
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
04-26 442
遇到 Element Plus 的<el-input>加了clearable宽度抖动问题，本质原因是它内部结构变化导致宽度跟着变了。给 el-input 固定宽度，保证它不管里面有什么都一动不动，稳得一批。顺带说一下，这个坑在表单、搜索栏、弹窗输入框这些场景特别容易踩，尤其是inline布局的时候。想要完整体验这个小坑，我还打包了一个GitHub示例和Vue3 Playground预览链接，有需要的可以自取～
组件-Element---Input（输入框）
GU_AO_SHI_TAI_DU的博客
07-02 1万+
组件-Element—Input 组件—输入框 基础用法 <el-input v-model="input" placeholder="请输入内容"></el-input> <script> export default { data() { return { input: '' } } } </script&g...
【element-ui】el-autocomplete实现 无数据匹配
最新发布
前端相关
06-05 804
总之，最推荐的方式是使用第一种方法，通过 default 插槽来灵活控制无匹配数据时的显示内容。这样可以更直接地控制 UI 的表现和逻辑。
Vue实战指南：el-autocomplete修改支持模糊搜索提示
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-13 2196
然而，默认情况下，这个组件可能并不支持模糊匹配，这意味着只有当用户输入的文本完全匹配选项的一部分时，才会显示匹配项。本文将详细介绍如何修改。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。Element UI 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，提供了一系列预设的组件来加速 Web 应用的开发。对于更复杂的模糊搜索需求，可以考虑使用像 Fuse.js 这样的第三方库，它提供了一种简单的方式来执行模糊搜索。
ElementUi使用el-autocomplete实现搜索建议（无数据匹配+点击clearable清除，不触发下拉选项）
小太阳的博客
10-21 1万+
ElementUi使用el-autocomplete实现搜索建议（无数据匹配+点击clearable清除，不触发下拉选项）
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
12-13
在elementui Input输入框中可以找到远程搜索组件，获取服务端的数据 官网中的数据list都是写在loadAll()中的，而如果我们此时要用到mock的数据就要在此基础上对代码进行修改。 -mock数据的获取- 我们要获取远程mock...
【BUG】在开发中遇到的一些bug和报错
weixin_67340539的博客
09-13 487
我在开发中难免会遇到一些bug和报错，此篇文章用于整理本人在开发中遇到的bug以及对应的解决办法和文章路径
el-autocomplete不显示下拉框，选中后还弹出下拉框，手动去掉输入框焦点
weixin_45599105的博客
02-28 1298
el-autocomplete不显示下拉框，el-autocomplete选中后还弹出下拉框，el-autocomplete手动去掉输入框焦点
element el-autocomplete模糊搜索，点击clearable清空后，再输入下拉框不显示
honeymoon_的博客
12-01 3651
（一）问题描述 用element 的输入建议框，实现模糊搜索，在点击清空按钮clearable之后，如果输入框已经是聚焦状态，再次输入时建议框不显示。el-autocomplete组件在执行清除事件时，将activated置为了false。当querySearch执行成功，activated仍为false，所以下拉框不显示。 element官网链接：https://element.eleme.cn/#/zh-CN/component/input （二）解决 给el-autocomplete添加一个ref
el-autocomplete使用clearable造成远程搜索不显示问题解决
sinat_34896766的博客
06-19 412
但会出现点击清除图标，再输入数据，远程搜索数据下拉框不显示，可采用添加“trigger-on-focus” 和“v-get-selected-value”属性解决问题。使用基础用法，如上时，会存在下拉框不跟随输入框滚动的情况，添加“popper-append-to-body” 即可解决不跟随滚动的问题，
element UI的带输入建议el-autocomplete总结（详细，全）
热门推荐
fenger_c的博客
09-14 9万+
引用el-autocomplete 触发带输入建议的两种方式 转成输入建议回调的数据结构 增加回车触发事件 解决回车后建议输入框没消失的bug
elementUI中el-autocomplete和el-select用法和各种坑
以马内利的博客
12-22 8069
又或者是如果第一次搜索”北京“，出来北京的列表，选择”北京美丽安全有限公司“后，再次把”美丽安全有限公司“删掉，在弹出的列表中没选择，直接点击旁边，隐藏了列表，再点击提交按钮。但又出现新的问题，打开dialog中首次输入公司，查询出来的列表。但是其他id值没被清空，还是上一次选择的，在提交的时候随便输入一个名字，没选择，对应的id是有值的，还能提交，这就是另外一个bug了。需求：要在文本框中通过输入关键字模糊搜索出一个列表，在列表中选中一个值后，这个选中的对象的其他属性要赋值到提交对象上，用于提交。
【ElementUI】el-autocomplete 远程搜索自动填充
joanmelon的博客
09-13 2023
工作需求：在存在大量客户的情况下，输入姓名中的任意字可以匹配相关联的姓名。以下是按照实现。
关于element-ui中输入框（el-autocomplete）使用的踩坑
qq_51443304的博客
08-23 352
最近在做一个数据追溯系统，关于前端部分，想优化一些功能样式。实现一个提示建议的输入框。
element UI-远程搜索（el-autocomplete）
JustDI0209的博客
11-22 1466
1.需求 表单项（系统名称）需具有搜索功能 2.实现 <template> <div class="publicBox"> <div> <div class="main-content"> <div class="content-top"> &lt...
element ui 组件el-autocomplete的使用方法（输入建议，利用filter和include）
liuyang___的博客
02-22 515
我们可以看到，这个代码，需要写一个函数，也就是querySearch，所以我们在methods里面写入这个方法，这个方法要传入两个值，一个query（这个随便写），还有一个cb，这个不是随便写的，接下来看代码实现吧。这里面有两个注意的点，第一个就是data里面的coffees是一个对象数组，不是一个单纯的数组，第二个就是一定要有cb返回！我们首先要先将标签写出来，其次写入一些属性，这个直接去官网粘贴即可！filter就是过滤器，他可以过滤出我们想要的东西。
第二十一篇：详细说说el-autocomplete模糊搜索所遇到的坑
maliyao4233的博客
08-29 666
*描述：**点击新增弹窗，模糊搜索如果没选择，直接关闭或者取消的话，再次点击弹窗进来会保留上次的搜索记录。**解决办法：**我看网上解决办法很少。有个博主写的这种办法加blur，在失去焦点的时候清空上一次搜索记录。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值