前端实现搜索功能

news/2025/2/12 19:36:11/

最近遇到一个需求,用户在输入框输入关键字之后,点击搜索按钮后进行搜索,如下图,选中的数据在下面,上面展现的是搜索后的数据,现在选中了2条数据:
在这里插入图片描述
当用户输入KET后点击搜索,搜出的结果有16条,勾选全选选中后,将选中的16条的数据加到之前已选的2条数据里,于是此时已选的数据里有了18条
在这里插入图片描述
当我清空搜索词,点击搜索后,结果如下,上面还原到了最开始的21条数据,然后已选的里面还是18条数据:
在这里插入图片描述
当我们点击下一步时,会将已选的18条数据带到下一步的逻辑里。为了实现上面的效果,初始数据originList,页面上展示的数据myOriginList,选中的数据selectArr,是否全选中checkAll,实现思路是点击搜索按钮后,触发search方法,先判断输入框是否有搜索词,区别处理,如果有搜索词的话,先拷贝一份源数据originList,也就是先拷贝一份初始数据,然后通过数组的filter+includes方法实现过滤,将过滤后得到的数组回显到页面myOriginList上&#x


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

相关文章

phpstorm配置ftp

1 选择设置ftp 2设置自动上传

2. Spring Boot 自动配置 Mybatis 流程

1. Spring Boot 自动配置 Mybatis 自动配置过程中做了3个主要bean的创建及很重要的一些事情。 sqlSessionFactory、sqlSessionTemplate、MapperScannerConfigurer 等配置bean的创建。sqlSessionFactory:解析 xml配置文件,并将MappedStatement放入到Has…

2024-01-03 无重叠区间

435. 无重叠区间 思路:和最少数量引爆气球的箭的思路基本都是一致了!贪心就是比较左边的值是否大于下一个右边的值 class Solution:def eraseOverlapIntervals(self, points: List[List[int]]) -> int:points.sort(keylambda x: (x[0], x[1]))# 比较…

以数据资产入表为抓手,推动数据资产化

在数字化时代,数据已经成为企业的重要资产。数据资产化是将数据视为一种有价值的资产,对其进行有效管理和利用的过程。而数据资产入表则是将数据资产纳入财务报表,以反映其价值和对企业财务状况的影响。本文亿信华辰 将深入探讨数据资产化与数…

认证评价的方法

认证评价是对于个人或组织的能力、技能或知识的确认,通常用于确保质量、安全或合规性。以下是一些常用的认证评价方法: 资格审查 资格审查是认证评价的第一步,主要评估个人或组织是否具备参与认证的基本条件。例如,对于某些专业…

计算机网络专栏目录

1. http header 请求头 x-forwarded-for 2. HTTP/HTTPS、TLS/SSL 协议

ChatGPT4助力Python数据分析与可视化、人工智能建模及论文高效撰写

2022年11月30日,可能将成为一个改变人类历史的日子——美国人工智能开发机构OpenAI推出了聊天机器人ChatGPT3.5,将人工智能的发展推向了一个新的高度。2023年4月,更强版本的ChatGPT4.0上线,文本、语音、图像等多模态交互方式使其在…

C++——map和set的基本使用

目录 一,关联式容器 二,键值对 三,set的使用 3.1 set介绍 3.2 set的插入和删除 3.3 set的pair 3.4 multiset 四,map的使用 4.1 map介绍 4.2 map实现简易字典 4.3 map实现统计次数 4.4 map的[] 五,使用map或…