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

最新推荐文章于 2024-04-30 14:28:57 发布
最新推荐文章于 2024-04-30 14:28:57 发布
阅读量4k 收藏 5
点赞数 3
分类专栏： Bug vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43760194/article/details/107539337
版权
Bug 同时被 2 个专栏收录
11 篇文章 0 订阅
订阅专栏
vue
7 篇文章 0 订阅
订阅专栏

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

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

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

吴香香
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
el-autocomplete不显示下拉框，选中后还弹出下拉框，手动去掉输入框焦点
weixin_45599105的博客
02-28 673
el-autocomplete不显示下拉框，el-autocomplete选中后还弹出下拉框，el-autocomplete手动去掉输入框焦点
ElementUi el-autocomplete 踩坑 （使用clearable清除,点击输入框下拉条件不再显示）
weixin_42190844的博客
10-14 9514
今天在写组件的时候，用到了el-autocomplete来做模糊搜索。因为要可以清除条件，所以加了clearable属性，然后遇到了个bug。点击清除图标后，如果你已经是聚焦状态了，你在点击输入框，下拉框不会再显示了 查了一下，是因为有element-ui源码有bug，主要原因是 参考该博客 autocomplete组件在执行清除事件时，将activated置为false。这时候下拉框不会显示了，而在querySearch执行成功后又没有将activated置为true。所以导致了该bug。解决的核心.
Vue通过下拉框选择字典值，并将对应的label以及value值提交到后端
最新发布
m0_58462450的博客
04-30 790
1.因为做的产品性质是多选，它会以数组的方式提交，所以需要先将Json格式转变为String。方法会遍历数组中的每个元素，如果回调函数返回。后面的表达式不会执行，整个表达式的结果将是。，则整个表达式的结果将被右侧的空字符串。产品性质也是从字典中获取。2.提交表单，先访问了。是可选链操作符，如果。是逻辑或操作符，如果。dict_data表。产品品种从字典中获取。dict_type表。
第二十一篇：详细说说el-autocomplete模糊搜索所遇到的坑
maliyao4233的博客
08-29 468
*描述：**点击新增弹窗，模糊搜索如果没选择，直接关闭或者取消的话，再次点击弹窗进来会保留上次的搜索记录。**解决办法：**我看网上解决办法很少。有个博主写的这种办法加blur，在失去焦点的时候清空上一次搜索记录。
el-select 出现提示后 失去焦点，再次获取焦点会出现上次推荐数据
sby_163的博客
03-11 2266
期望：失去焦点后，再次点击不出现上次推荐数据 解决方法： <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 {
自动补全输入框-el-autocomplete
G_ruirui的博客
03-14 541
自动补全输入框-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
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
10-16
在elementui Input输入框中可以找到远程搜索组件，获取服务端的数据。这篇文章主要给大家介绍Vue el-autocomplete远程搜索下拉框并实现自动填充功能，感兴趣的朋友一起看看吧
基于Vue el-autocomplete 实现类似百度搜索框功能
01-19
效果图如下所示： 首先上代码 <div class=assets-search> ... <div class=search-input-layout> <!--<el-input class=search-input placeholder=检索数据 @keyup.enter.native=searchAssets($eve
google-autocomplete：Google自动完成Vue组件
02-04
Google Autocomplete组件不过是官方Google Places API的Vue.js包装器。 尽管使用Vue.js编写了演示，但可以从任何JS框架提取Autocomplete对象。 要求 您将必须安装Vue＆Vuemit： npm install vue -- save npm ...
jquery autocomplete实现框输入提示
04-11
接下来，我们需要在 JavaScript 中初始化 Autocomplete 组件，并设置数据源。这里我们假设你有一个返回 JSON 数据的后端 API，数据源可以是城市名、商品名等。 ```javascript $(function() { var availableTags = ...
el-autocomplete 踩坑实录#VUE #el-autocomplete #下拉清空 #下拉遮挡 #下拉宽度不够
syncxq的博客
12-12 1629
el-autocomplete 踩坑实录#VUE #el-autocomplete #下拉清空 #下拉遮挡 #下拉宽度不够
Vue3框架引入的Element Plus里面的Autocomplete自动补全输入框
spring_007_999的博客
04-18 3297
Vue3前端输入下拉选项模糊查询
element-ui 使用autocomplete组件时， 去除掉显示出来的下拉框
qq_62212230的博客
08-22 2613
因为当输入框里面只要聚焦 它的activated属性机会变成true，所以需要将activated变成false， 下拉框就会消失。
【bug记录】vue中input框修改时页面其他input的数值随之改变
x781054643的博客
03-20 943
vue中input框修改时页面其他input的数值随之改变
vue 前端 模糊查询 el-autocomplete
yanjun3的博客
03-04 3238
<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 6199
关于element里边的el-autocomplete自动获取焦点 这个组件真的是很坑的，在文档里边有这个方法，但是一用起来就是就知道多坑 看了文档我是直接这么写的（test是组件中ref的属性值），结果控制台就报错了 搞了半天，最后都想改组件代码了，试着打印了下这个组件，发现组件中是两个 然后打开组件代码，之前控制的是组件外边的，然后找到原因了，就把代码改成这样的： this.code=th...
el-autocomplete 获取焦点后一直弹出提示框取消又出现
周家大小姐
03-26 2670
解决:在:fetch-suggestions="querySearch"方法中写入失去焦点就可以 <el-autocomplete v-model.trim="search.userName" v-loading="autocompleteLoading" class="inline-input contr...
vue3.0 el-autocomplete
05-18
Vue 3.0 是一款流行的 JavaScript 框架，而 el-autocomplete 则是一款基于 Vue.js 的自动完成组件，用于输入框的自动补全功能。下面是使用 Vue 3.0 和 el-autocomplete 实现自动补全功能的简单示例： 首先，你需要在项目中安装 el-autocomplete 组件： ```bash npm install element-ui el-autocomplete -S ``` 然后，在你的 Vue 组件中引入 el-autocomplete 组件，并在模板中使用： ```html <template> <div> <el-autocomplete v-model="inputValue" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect" ></el-autocomplete> </div> </template> <script> import { ref } from 'vue'; import { fetchSearchResult } from '@/api'; export default { name: 'MyComponent', setup() { const inputValue = ref(''); const querySearchAsync = async (queryString, callback) => { const res = await fetchSearchResult(queryString); if (res.code === 200) { callback(res.data); } }; const handleSelect = (item) => { console.log(item); }; return { inputValue, querySearchAsync, handleSelect, }; }, }; </script> ``` 上面的代码中，我们使用了 Vue 3.0 的 Composition API，通过 `ref` 创建了一个响应式变量 `inputValue`，用于存储输入框的值。`querySearchAsync` 函数用于异步获取搜索结果，该函数会在用户每次输入时被调用。`handleSelect` 函数会在用户选择某个搜索结果时被调用。 这里的 `fetchSearchResult` 函数是一个异步函数，用于从后端获取搜索结果。你需要根据你的项目实际情况来实现该函数。 至此，我们已经完成了使用 Vue 3.0 和 el-autocomplete 实现自动补全功能的示例。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值