vue中引用el-autocomplete 组件，失去焦点，input框值变化，展示还是上次结果

最新推荐文章于 2025-03-27 17:42:34 发布
最新推荐文章于 2025-03-27 17:42:34 发布
阅读量4.2k 收藏 5
点赞数 3
分类专栏： Bug vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43760194/article/details/107539337
版权

我是这么处理的
在这里插入图片描述
通过ref，调用清除方法的时候复制下面一行代码

this.$refs['elautocomplete'].suggestions=[];

把之前查询到的下拉框内容清除掉就可以了

使用vue3.2 element-plus 封装 el-autocomplete 组件
程序员昊轩的博客
11-25 907
使用vue3.2 element-plus 封装 el-autocomplete 组件
Vue实战指南：el-autocomplete修改支持模糊搜索提示
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-13 2060
然而，默认情况下，这个组件可能并不支持模糊匹配，这意味着只有当用户输入的文本完全匹配选项的一部分时，才会显示匹配项。本文将详细介绍如何修改。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。Element UI 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，提供了一系列预设的组件来加速 Web 应用的开发。对于更复杂的模糊搜索需求，可以考虑使用像 Fuse.js 这样的第三方库，它提供了一种简单的方式来执行模糊搜索。
ElementUi el-autocomplete 踩坑 （使用clearable清除,点击输入框下拉条件不再显示）
热门推荐
weixin_42190844的博客
10-14 1万+
今天在写组件的时候，用到了el-autocomplete来做模糊搜索。因为要可以清除条件，所以加了clearable属性，然后遇到了个bug。点击清除图标后，如果你已经是聚焦状态了，你在点击输入框，下拉框不会再显示了 查了一下，是因为有element-ui源码有bug，主要原因是 参考该博客 autocomplete组件在执行清除事件时，将activated置为false。这时候下拉框不会显示了，而在querySearch执行成功后又没有将activated置为true。所以导致了该bug。解决的核心.
第二十一篇：详细说说el-autocomplete模糊搜索所遇到的坑
maliyao4233的博客
08-29 628
*描述：**点击新增弹窗，模糊搜索如果没选择，直接关闭或者取消的话，再次点击弹窗进来会保留上次的搜索记录。**解决办法：**我看网上解决办法很少。有个博主写的这种办法加blur，在失去焦点的时候清空上一次搜索记录。
vue+element ui的远程搜索el-autocomplete组件详解与封装
最新发布
qq_67240326的博客
03-27 1400
vue+element ui的远程搜索el-autocomplete组件详解与封装
element ui 的el-input输入一个字后失去焦点，需重新点击输入框才能再次输入
qq_45067263的博客
05-27 2852
我是form表单嵌套表格，里面的el-input输入框，输入第一个值的时候会突然失去焦点，需要再次点击输入框才能正常输入，原因是table的key值，需要改成正常的index即可，如果你是循环的，也改为index就行。
el-autocomplete不显示下拉框，选中后还弹出下拉框，手动去掉输入框焦点
weixin_45599105的博客
02-28 1225
el-autocomplete不显示下拉框，el-autocomplete选中后还弹出下拉框，el-autocomplete手动去掉输入框焦点
el-select 出现提示后 失去焦点，再次获取焦点会出现上次推荐数据
sby_163的博客
03-11 2414
期望：失去焦点后，再次点击不出现上次推荐数据 解决方法： <el-select …… @visible-change="loseFocus" …… > <el-option v-for="item in options" :key="item.key" :label="item.value" :value="item.key" /> </el-select> …… data () { return {
基于Vue el-autocomplete 实现类似百度搜索框功能
10-16
在本篇文章中，我们将探讨如何利用Vue.js框架中的el-autocomplete组件来实现一个类似于百度搜索框的功能。Vue.js是一个流行的前端JavaScript框架，它允许开发者构建交互式的用户界面。el-autocomplete是一个具有自动...
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
12-13
在elementui Input输入框中可以找到远程搜索组件，获取服务端的数据 官网中的数据list都是写在loadAll()中的，而如果我们此时要用到mock的数据就要在此基础上对代码进行修改。 -mock数据的获取- 我们要获取远程mock...
自动补全输入框-el-autocomplete
G_ruirui的博客
03-14 666
自动补全输入框-el-autocomplete。
快速解决js开发下拉框中blur与click冲突
11-23
在开发中我们会经常遇到blur和click冲突的情况。下面叙述了开发中常遇到的“下拉框”的问题，并提供了两种解决方案。 一、blur和click事件简述 blur事件：当元素失去焦点时触发blur事件；其为表单事件，blur和focus事件不会冒泡，其他表单事件都可以。 click事件：当点击元素时触发click事件；所有元素都有此事件，会产生冒泡。 示例1：blur事件为表单事件 <input type="text" id="tel"> [removed] document.addEventListener("blur", function(){ console.log("my
el-autocomplete每次打开时先显示旧数据0.几秒才显示新数据
liudddsadsasa的博客
12-02 307
el-autocomplete无法及时显示新数据问题
el-autocomplete 踩坑实录#VUE #el-autocomplete #下拉清空 #下拉遮挡 #下拉宽度不够
syncxq的博客
12-12 1886
el-autocomplete 踩坑实录#VUE #el-autocomplete #下拉清空 #下拉遮挡 #下拉宽度不够
Vue3框架引入的Element Plus里面的Autocomplete自动补全输入框
spring_007_999的博客
04-18 4067
Vue3前端输入下拉选项模糊查询
element-ui 使用autocomplete组件时， 去除掉显示出来的下拉框
qq_62212230的博客
08-22 2971
因为当输入框里面只要聚焦 它的activated属性机会变成true，所以需要将activated变成false， 下拉框就会消失。
【bug记录】vue中input框修改时页面其他input的数值随之改变
x781054643的博客
03-20 1090
vue中input框修改时页面其他input的数值随之改变
vue 前端 模糊查询 el-autocomplete
yanjun3的博客
03-04 3364
<el-autocomplete clearable @clear="setBlur()" @input="handle" :fetch-suggestions="querySearch" :trigger-on-focus="false" @select="handleSelect" class="inline-input" v-model.
关于element里边的el-autocomplete自动获取焦点
weixin_44981223的博客
07-23 6433
关于element里边的el-autocomplete自动获取焦点 这个组件真的是很坑的，在文档里边有这个方法，但是一用起来就是就知道多坑 看了文档我是直接这么写的（test是组件中ref的属性值），结果控制台就报错了 搞了半天，最后都想改组件代码了，试着打印了下这个组件，发现组件中是两个 然后打开组件代码，之前控制的是组件外边的，然后找到原因了，就把代码改成这样的： this.code=th...
vue中组件el-autocomplete在远程搜不到数据的情况下如何展示无数据
10-22
在Vue.js中，当你使用Element UI库的`el-autocomplete`组件进行远程搜索，如果请求返回的数据为空，你可以通过设置一些选项来控制无数据的显示。以下是常见的做法： 1. **v-model默认值**：给`v-model`绑定一个初始值，比如一个空字符串`''`或`null`。这样，在请求未完成或失败时，输入框会显示这个默认值。 ```html <template> <el-autocomplete v-model="searchTerm" placeholder="请输入搜索内容" :remote-method="remoteSearch" :fetch-suggestions="remoteSearch" ></el-autocomplete> </template> <script> export default { data() { return { searchTerm: '', // 或者 null }; }, methods: { remoteSearch(query) { if (!query) return []; // 远程搜索逻辑... // 如果搜索结果为空，直接返回空数组 return []; } }, }; </script> ``` 2. **自定义提示信息**：可以设置`empty-text`属性，当没有数据时显示自定义提示信息。 ```html <el-autocomplete ... empty-text="暂无匹配结果" ></el-autocomplete> ``` 3. **自定义模板**：如果你想提供更复杂的无数据状态，可以在组件内部设置一个`<span>`或其他元素，并动态地切换它的可见性。 ```html <template> <div> <el-input v-model="searchTerm" /> <el-autocomplete ... :fetch-suggestions="remoteSearch" v-if="searchTerm && suggestions.length > 0" ></el-autocomplete> <span v-else>暂无匹配结果</span> </div> </template> ``` 以上就是在`el-autocomplete`组件远程搜索无数据时的一些处理方法。记得在实际应用中，通常会在远程搜索的函数内部添加错误处理逻辑，以便优雅地处理网络问题。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值