从覆盖到拼接:优化 onInput 事件的输入

news/2024/12/1 9:56:11/

在使用 ElSelect 组件的 onInput 事件时,由于每次输入都触发搜索,导致请求频繁且新搜索结果覆盖了旧结果,无法实现输入数据的累积搜索。我们希望的是,每次搜索能够将新的输入内容与之前的内容拼接显示,从而实现用户的诉求。

ElSelect 组件

<ElSelectref={storeRef}filterableremoteremoteMethod={getSiteList}multipleclearablev-model={queryForm.value.pickUpSiteIdList}placeholder="请输入门店名称"onInput={(e) => { handleInput(e?.data || '', SelectEnum.store); }}>{siteList.value?.map((item) => (<ElOption label={item.siteName} value={item.siteId} />))}
</ElSelect>

onInput 事件

const handleInput = (query, type) => {if (type === SelectEnum.store) {storeRef.value.remoteMethod(query);}
};// 其余
const getSiteList = async (query = '') => {if (query) {const res = await querySiteList({siteName: query,});siteList.value = res.records;} else {siteList.value = [];}
};

目前现状展示,后面搜索的结果覆盖之前的搜索结果o(╥﹏╥)o。

可能第一反应就是,使用函数防抖,OK。

import { debounce } from 'lodash';const handleInput = debounce((query, type) => {if (type === SelectEnum.store) {storeRef.value.remoteMethod(query);}
}, 500);

展示为:

虽然效果好一些,但仍不是我们想要的结果,我希望搜索的是「上海南」,而不是「上海」「南」 。

可能会觉得,时间拉长点,会不会好一点,展示一下:

const handleInput = debounce((query, type) => {if (type === SelectEnum.store) {storeRef.value.remoteMethod(query);}
}, 2000);

显而易见,更加糟糕,因为间隔时间变长,对应的搜索也就更加精确,最后一次搜索就是「站」。

不妨换一个思路:

将之前的输入与当前输入拼接起来,每次用户输入时,等一小段时间再发起请求,这样可以减少请求次数并避免连续输入时产生多个请求。 

const searchContent = ref(''); // 当前输入框内容,拼接所有输入的内容
// 防抖定时器
let timeoutId = null;const handleInput = (query, type) => {// 处理输入拼接searchContent.value += query;// 清除之前的定时器,防止连续输入时发送多个请求if (timeoutId) {clearTimeout(timeoutId);}// 使用防抖,延迟搜索timeoutId = setTimeout(() => {if (type === SelectEnum.store) {storeRef.value.remoteMethod(searchContent.value);}}, 500); // 500ms 的防抖延迟
};

运行发现一个比较诧异的现象,输入内容包括那么多拼音,也不是我们想要的。 

再改进一下:

需要解决 累积拼接输入时产生的错误!!!这种问题通常是因为 onInput 事件触发时处理不当,导致历史内容和当前输入被错误拼接。

解决方法:以输入框当前值为准!

// 防抖定时器
let timeoutId = null;const handleInput = (query, type) => {// 清除之前的定时器,防止连续输入时发送多个请求if (timeoutId) {clearTimeout(timeoutId);}// 防抖延迟timeoutId = setTimeout(() => {nextTick(() => {if (type === SelectEnum.store) {const inputValue = storeRef.value?.$el.querySelector('input')?.value || '';storeRef.value.remoteMethod(inputValue);}});}, 500); // 防抖延迟 500ms
};

代码解释:

每次 onInput 事件触发时,直接使用 storeRef 引用直接获取输入框中当前的完整值,确保内容是正确的,而不是依赖传入的 onInput 参数或直接拼接,这避免了累积拼接错误。

使用 nextTick,确保在 DOM 更新后获取到最新的输入框值。

OK,到处实现完美解决!  


http://www.ppmy.cn/news/1551447.html

相关文章

当新能源遇见低空经济:无人机在光伏领域的创新应用

随着全球能源结构的转型和技术的不断进步&#xff0c;新能源行业已成为推动经济社会发展的重要力量。其中&#xff0c;低空经济作为新兴的战略性产业&#xff0c;正深刻改变着人类社会的出行方式和产业链格局。在这一背景下&#xff0c;无人机与光伏产业的结合&#xff0c;不仅…

netconf 代码架构

NETCONF&#xff08;Network Configuration Protocol&#xff09;是一种基于 XML 的网络配置管理协议&#xff0c;主要用于在网络设备之间进行配置管理、状态监控和操作。它被设计为一种可扩展的协议&#xff0c;并且在自动化网络管理中扮演着重要角色。NETCONF 通过安全的通信…

Figma入门-铅笔钢笔工具

Figma入门-铅笔钢笔工具 前言 在之前的工作中&#xff0c;大家的原型图都是使用 Axure 制作的&#xff0c;印象中 Figma 一直是个专业设计软件。 最近&#xff0c;很多产品朋友告诉我&#xff0c;很多原型图都开始用Figma制作了&#xff0c;并且很多组件都是内置的&#xff…

SpringBoot开发——结合Nginx实现负载均衡

文章目录 负载均衡介绍介绍Nginx实现负载均衡的示例图:负载均衡策略1.Round Robin:2.Least Connections:3.IP Hash :4.Generic Hash:5.Least Time (NGINX Plus only)6.Random:Nginx+SpringBoot实现负载均衡环境准备Nginx 配置负载均衡测试负载均衡介绍 介绍 在介绍Nginx的负…

《安富莱嵌入式周报》第346期:开源2GHz带宽,12bit分辨率,3.2Gsps采样率示波,开源固件安全分析器, 开源口袋电源,开源健康测量,FreeCAD

周报汇总地址&#xff1a;嵌入式周报 - uCOS & uCGUI & emWin & embOS & TouchGFX & ThreadX - 硬汉嵌入式论坛 - Powered by Discuz! 视频&#xff1a; https://www.bilibili.com/video/BV1TYBhYKECK/ 《安富莱嵌入式周报》第346期&#xff1a;开源2GHz带…

centos8:Could not resolve host: mirrorlist.centos.org

【1】错误消息&#xff1a; [rootcentos211 redis-7.0.15]# yum update CentOS Stream 8 - AppStream …

Linux——基础命令(2) 文件内容操作

目录 ​编辑 文件内容操作 1.Vim &#xff08;1&#xff09;移动光标 &#xff08;2&#xff09;复制 &#xff08;3&#xff09;剪切 &#xff08;4&#xff09;删除 &#xff08;5&#xff09;粘贴 &#xff08;6&#xff09;替换,撤销,查找 &#xff08;7&#xff…

EtherCAT转DeviceNe台达MH2与欧姆龙CJ1W-DRM21通讯案例

一.案例背景 台达MH2设备通常采用EtherCAT通信协议&#xff0c;这种协议在高速实时通信方面表现出色&#xff0c;适合设备之间的快速数据交换和精准控制。而欧姆龙CJ1W-DRM21 模块基于DeviceNet通信协议&#xff0c;DeviceNet在工业现场总线领域应用广泛&#xff0c;侧重于设备…