el-autocomplete实现建议匹配

最新推荐文章于 2023-04-07 14:04:23 发布

行走的小龙

最新推荐文章于 2023-04-07 14:04:23 发布

阅读量223

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_47236535/article/details/126227875

版权

这篇博客详细介绍了如何利用el-autocomplete组件在前端实现CSS和JavaScript结合的建议匹配功能，包括设置CSS样式和编写JavaScript逻辑来完成智能搜索提示。

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

1.css部分

 <el-form-item prop="searchValue">
       <el-autocomplete v-model="fileName" :debounce="10" :fetch-suggestions="querySearchAsync" class="scene_input" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>
 </el-form-item>

2.js部分

      querySearchAsync(queryString, cb

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

行走的小龙

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
el-autocomplete实现建议匹配

本文章仅供参考
复制链接

扫一扫

el-autocomplete 必填校验问题

神膘护体小月半的博客

09-13

1054

【代码】el-autocomplete 必填校验问题。

【element】el-autocomplete的常见用法

热门推荐

糯米w的博客

04-28

3万+

详细讲解一下模糊匹配的种种方法,有前端自行匹配以及请求后端接口的匹配,同时包括各种自定义的样式设计,涵盖了基本需求所需,同时配备了源码,相信通过自己的尝试可以更好的理解各种方法的作用. ...

参与评论您还未登录，请先登录后发表或查看评论

Element-UI之＜el-autocomplete＞标签在输入框输入匹配不到下拉列表中内容

weixin_44839328的博客

02-03

2417

功能需求：查到另一张表的“姓名”字段，在输入框下有下拉框可以输入，自动匹配下拉列表中的字段鼠标点击在输入框，下拉列表出现实现使用Element-UI前端模板，< el-autocomplete> 之 “自定义模板” 标签复制到代码中后，在输入框输入 “三” 之后，下拉列表中不能匹配到下拉框中字段解决过滤方法中,这里是=== 0，indexOf（）方法是返回包含的位置，并不是存在===0，不存在===-1 restaurant.crewName.indexOf(que

实现类似于Windows开始运行中的带有自动匹配下拉列表的组合框（或编辑框）

冰风火雨

01-25

1020

1. 创建已经实现IAutoComplete接口的COM对象，需要初始化CoInitialize(NULL); IAutoComplete *pac = NULL; HRESULT hRet = CoCreateInstance(CLSID_AutoComplete, NULL, CLSCTX_INPROC_SERVER, IID_IAutoComplete, (LPV

使用el-autocomplete做校验时，点击选择完选项还是会提示报错信息

weixin_45618937的博客

11-28

1319

使用el-autocomplete做校验时，点击选择完选项还是会提示报错信息

jquery autocomplete实现框输入提示

04-11

jQuery Autocomplete 是一个强大的组件，广泛应用于网页上的输入框，可以为用户提供实时的搜索建议或自动补全功能。这个组件通过与后端服务器进行异步通信（通常使用 AJAX 技术）来获取数据源，并在用户输入时动态...

详解element-ui中el-select的默认选择项问题

10-16

在Element-UI，一个流行的Vue.js组件库中，`el-select`组件被广泛用于实现下拉选择功能。本文将深入探讨`el-select`组件在设置默认选择项时可能遇到的问题及解决方案。首先，`el-select`是Element-UI提供的一个...

vant的field组件（autocomplete）

01-17

`Autocomplete`提供了一个下拉列表，当用户在输入框中键入内容时，会显示出匹配的建议选项。在Vant中，可以通过设置`Autocomplete`的`data`属性来指定可选的建议数据。`@input`事件监听输入变化，当用户输入时触发，...

backbone-autocomplete:使用Backbone.js构建的自动完成小部件

05-05

在这个特定的项目"backbone-autocomplete"中，我们专注于如何利用Backbone.js来创建一个自动完成小部件，这个小部件通常用于输入框，当用户输入时，会根据已有的数据提供匹配的建议。 Backbone.AutoCompleteView是...

Vue Autocomplete 自动完成功能简单示例

10-16

Vue Autocomplete 是 Vue.js 框架中一个用于实现自动完成功能的组件，它能够帮助用户在输入框中快速找到并选择匹配的选项。在本示例中，我们将探讨如何利用 `el-autocomplete` 组件来实现这一功能，并通过实际代码...

el-autocomplete 组件实现输入模糊匹配

yand_vv的专栏

04-07

535

【代码】el-autocomplete 组件实现输入模糊匹配。

再次记录一个非常的无语的bug，el-autocomplete验证规则出不来的问题

老道，柳三剑是也。

01-02

1497

前提项目在交由客户试用一段时间后，因为el-select下拉框数据太多，选择起来太过费时费力，所以提出修改，希望可以修改成类似百度搜索那种，可以在输入一个字后，有联想结果的那种，听到这个需求的时候，我立刻想起了el-autocomplete这个组件。遇到的问题问题1：只有输入候选项的第一个汉字，才有联想结果解决方法：将原代码中的toLowerCase()) === 0改成toLowerCase()) > -1即可解决该问题。原代码： createFilter(que...

elementui组件el-autocomplete 联想搜索

小猫爪子

02-02

1409

autocomplete 是一个可带输入建议的输入框组件，fetch-suggestions 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。使用之前建议参考官方文档 input根据输入内容提供对应的输入建议https://element.eleme.cn/#/zh-CN/component/input 使用组件遇到的问题输入建议回调的数据结构增加回车触发

vue+element UI带输入建议的输入框el-autocomplete

云中客的博客

12-06

1万+

之前做的项目中使用了element的选择器，然而由于选项太多不好找就更换为带输入建议的输入框但我们接口要求并非是传入公司名称，而是传入这个注册公司的id，后端传入的数据结构经过转换后大致是这样的： companyList = [ { company_id: 1, comopany_name: '腾讯' }, { company_id: 2, comopany_...

element-ui的el-autocomplete组件（带建议的输入框）根据输入进行提示，并在以特定符号分割时重新提示

立于浮华之世，奏响天籁之音

08-03

1215

需求我这里需要对用户输入的内容进行提示，然后用户输入了特定的分割符号时，重新匹配提示遇到的问题以及解决问题方法这个组件本身是点击某个建议就将对应的value直接赋值给v-model绑定的值，所以不符合现在的需求，这里赋的值需要更改为“最后一个分割符号及其之前的值 + 所点击的建议项的值”。解决的方法是在返回建议项的方法中（fetch-suggestions），给每一个建议项添加一个msg的属性用于存储输入框中应该展示的值，之后在点击建议项的回调函数中（select）将msg的值赋值给v-model绑

使用el-autocomplete实现带输入建议

Smile_666666的博客

11-11

847

**今天在开发过程中遇到需要实现一个需求，添加便捷的搜索功能，刚开始的想法是直接在搜索input框下面加多个弹窗，可以边输入的过程向后端发起接口，返回所有的数据，后面发现element ui中就有带输入建议的功能下面是使用和注意点** <el-autocomplete placeholder="请填写内容" v-model="innerValue" @select="handleSelect" :trigger-on-focus="false" :fetch-suggestions="que

element中关于el-autocomplete和validate规则trigger/change之间的问题

qq_40235879的博客

12-22

5281

代码 <el-form :model="purchaseForm" :rules="rules" ref="purchaseForm"> <el-form-item label="批准文号" prop="purId"> <el-autocomplete popper-class="my-autocompl...

修复el-autocomplete组件监听change返回值始终是输入框的值而非选中的“输入建议”值

diu拿星的博客

12-21

4008

修复el-autocomplete组件change监听返回值始终是输入框的值而非选中的“输入建议”值。获取autocomplete组件实例，给input子组件添加change事件监听给autocomplete组件创建观察函数和自定义事件 1: 用户选择了输入建议：监听到select事件，移除观察函数，触发change事件并返回正确的值 2: 输入框失焦suggestions组件关闭：观察到autocomplete组件里的suggestions子组件的showPopper变化，移除观察函数，触发change

el-autocomplete实现块状