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

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

基础版

页面初始化加载完成后,拿到所有数据(后面用“库”表示),提前将库都已经建立好了,只需调用方法就可以模糊自己所需的数据;或者从官网直接复制就可以用;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="请输入内容
### 实现 `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、付费专栏及课程。

余额充值