【记录51】动态表单el-autocomplete远程搜索

最新推荐文章于 2025-04-27 19:19:17 发布
最新推荐文章于 2025-04-27 19:19:17 发布
阅读量460 收藏 4
点赞数 6
CC 4.0 BY-SA版权
分类专栏： vue element UI 案例 文章标签： elementui el-autocomplete
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45527702/article/details/144584810

笔者用的复杂版的，这里先简单说下基础版的

基础版

页面初始化加载完成后，拿到所有数据（后面用“库”表示），提前将库都已经建立好了，只需调用方法就可以模糊自己所需的数据；或者从官网直接复制就可以用；fetch-suggestions和@select两个方法

// 这是要求的数据格式
let list = [{
   
   value:'', address: ''}, ......{
   
   value:'', address: ''}]

// 需注意可以处理为自己想要的数据格式，value和address不能没有，可以添加自己所需字段
let list = [{
   
   value:'', key: '', address: ''}, ......{
   
   value:'', key: '', address: ''}]

<el-autocomplete v-model="vlaue" :fetch-suggestions="querySearchAsync" placeholder="请输入内容
最低0.47元/天 解锁文章

200万优质内容无限畅学
【Element plus】autodcomplete 远程搜索、模糊搜索
m0_67372185的博客
05-05 1101
远程搜索、模糊搜索
基于vue3 el-autocomplete实现远程搜索功能
weixin_44257822的博客
05-09 646
autocomplete 是一个可带输入建议的输入框组件，fetch-suggestions 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。使用elementui input组件。
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
12-13
官网的demo献上 在elementui Input输入框中可以找到远程搜索组件，获取服务端的数据 官网中的数据list都是写在loadAll()中的，而如果我们此时要用到mock的数据就要在此基础上对代码进行修改。 -mock数据的获取- 我们要获取远程mock中所有学生的学号信息，根据输入的数据来远程查找目标，并且在选中该目标后能够自动填充对应的姓名、生日、手机等信息，实现快速获取信息的功能，再也不用手动一个个去输入所有的数据啦～ 在template中添加el-autocomplete <el-autocomplete placeholder="请输入studentID" v-mo
【ElementUI】el-autocomplete 远程搜索自动填充
joanmelon的博客
09-13 2018
工作需求：在存在大量客户的情况下，输入姓名中的任意字可以匹配相关联的姓名。以下是按照实现。
封装el-autocomplete，接口调用
最新发布
irisMoon06的博客
04-27 245
template>/>// 这里可以替换为真实的API调用console.log('查询:', query)return [{ value: `${query}-结果1`, id: 1 },{ value: `${query}-结果2`, id: 2 }</script><template>/>])// 同时匹配value和category</script>
使用 el-autocomplete 实现远程搜索功能
一起coding，一起嗨。
05-28 1014
使用 el-autocomplete 实现远程搜索功能
el-autocomplete后台远程搜索
sinat_34896766的博客
05-26 882
el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect" ></el-autocomplete>el-complete可以实现后台远程搜索功能，但有时传入数据为空时，接口可能会报错。此时可在querySearchAsync方法中，根据queryString判断，若为空，则不掉用接口，直接callback([])，反之则调用接口，返回数据。
el-autocomplete 远程搜索 带输入建议
u013361179的博客
04-28 924
el-autocomplete 远程搜索 带输入建议 element ui
element el-autocomplete实现远程服务器搜索
蓝胖子的博客
11-17 1694
需求：项目中用到input框 需要远程搜索，从服务器获取数据，看到element 中有相关组件，在此记录下,在vue项目中如何使用远程搜索来实现的 组件：el-autocomplete 页面实现效果： 代码如下： <el-autocomplete ref="autocomplete" :popper-append-to-body="false" clearable class="filter-item"
element UI-远程搜索（el-autocomplete）
JustDI0209的博客
11-22 1456
1.需求 表单项（系统名称）需具有搜索功能 2.实现 <template> <div class="publicBox"> <div> <div class="main-content"> <div class="content-top"> &lt...
vue+element ui的远程搜索el-autocomplete组件详解与封装
qq_67240326的博客
03-27 1727
vue+element ui的远程搜索el-autocomplete组件详解与封装
解决el-autocomplete组件远程搜索的区间匹配问题
希望看完文章的你能够带着答案离开。
09-04 1238
解决el-autocomplete组件远程搜索的区间匹配问题
使用autocomplete完成Input输入提示(数据是远程数据)
12-26
使用autocomplete完成Input输入提示,数据是来自远程sql数据库的数据，使用linq查询。已实现！
若依、element-ui、el-autocomplete远程搜索
Xiaoweidumpb
11-29 651
若依、element-ui、el-autocomplete远程搜索
el-autocomplete输入时搜索
Skellig
11-10 509
el-autocomplete输入时搜索 ???????????? el-autocomplete 组件输入时搜索 <template> <div> <el-autocomplete v-model="list" :fetch-suggestions="search" placeholder="请输入内容进行查询" :trigger-on-focus="false"
el-autocomplete 远程搜索模糊查找存在优化问题
weixin_50637343的博客
10-29 356
遇到问题，比如“爱尔法公司”，当你输入“爱”的时候可以搜索的出来，如果是输入“尔”包括后面的字眼就无法搜索了，达不到模糊匹配的要求 解决方案： 文档中查询匹配方法可将state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0) 改为state.value.toLowerCase().indexOf(queryString.toLowerCase()) != -1即可，这样输入每个关键字眼都会返回true ...
el-autocomplete实现全模糊搜索
Jack_13201的博客
07-28 836
一、element文档里的效果 二、想要的效果 三、实现步骤 1、原文档里的代码 createFilter(queryString) { return (restaurant) => { return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0); }; }, 2、修改后的代码 createFilter(queryString)
el-autocomplete 远程搜索
12-31
### 实现 `el-autocomplete` 组件的远程搜索功能 为了实现基于 Vue 和 Element UI 的 `el-autocomplete` 远程搜索功能，可以按照如下方式构建代码结构： #### HTML 结构定义 HTML 部分通过 `<el-autocomplete>` 定义了一个自动完成输入框，并绑定了相应的事件处理函数。 ```html <el-autocomplete class="inline-input" v-model="state1" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect"> </el-autocomplete> ``` #### JavaScript 方法配置 JavaScript 中包含了用于获取建议列表的方法以及选择项后的回调方法。这里特别强调了异步加载数据的方式以支持远程搜索需求[^1]。 ```javascript export default { data() { return { state1: '', restaurants: [] }; }, methods: { querySearchAsync(queryString, cb) { setTimeout(() => { // 模拟网络请求延时 this.restaurants = loadAll(); // 假设loadAll是一个返回静态数据的方法，在实际应用中应替换为真实的API调用逻辑 const results = queryString ? this.restaurants.filter(this.createStateFilter(queryString)) : this.restaurants; clearTimeout(this.timeout); cb(results.slice(0, 10)); // 只取前十个匹配的结果作为提示选项 }, 300); // 设置模拟延迟时间为300毫秒 }, createStateFilter(queryString) { return (restaurant) => { return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0); }; }, handleSelect(item) { console.log(item); } } } ``` 上述代码片段展示了如何利用定时器来模仿服务器响应的时间差，而在真实场景里应当移除该部分并直接发起 HTTP 请求至后端服务接口获取最新数据[^2]。 对于提到的选择类型影响输入建议的问题，可以在每次改变操作类型(`oper_type`)之前清空当前缓存的数据集 (`this.item_list`) 或者设置标志位控制何时重新加载数据，从而确保用户看到最新的关联项目列表[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值