前端element ui输入框搜索带输入建议写法

诺白

已于 2023-04-12 16:12:30 修改

阅读量1.7k

点赞数 1

分类专栏：前端Element UI 文章标签： java vue.js elementui

于 2023-04-12 15:42:59 首次发布

本文链接：https://blog.csdn.net/nuobaix/article/details/130107901

版权

本文介绍了如何在 Vue.js 项目中使用 Element UI 的输入框组件实现搜索功能，特别是在输入框中触发回车查询事件 (@keyup.enter.native) 和显示输入建议的过程。作者分享了遇到的问题，如输入建议不显示和搜索限制，以及相应的解决方案，包括确保数据格式正确，以 `value` 字段提供输入建议，并调整搜索逻辑以避免仅搜索首字母的限制。

摘要由CSDN通过智能技术生成

HTML部分

<el-autocomplete
   class="inline-input"
   clearable
   v-model="queryParams.couponName"
   :fetch-suggestions="querySearch"
   placeholder="请输入内容"
   :style="{width: '80%'}"
   :trigger-on-focus="false"
   @select="handleSelect"
   @keyup.enter.native="handleQuery" >
</el-autocomplete>

ElementUI输入框(input)回车查询事件：

@keyup 译: 触发键盘事件
enter 译: 键盘回车提交
native 译:事件监听(个人理解)

总结(个人理解): 首先需求是在输入框内输入内容后敲下回车键位执行查询操作
那么我们要先去触发(@keyup)键盘上的回车键(enter)然后去监听(native)敲下回车的一刻
按这个逻辑那么也就组成了@keyup.enter.native,可能在大佬面前显得不太专业,
但是够让刚入门的朋友更好的去理解使用来完成相关功能的实现!