前端实现搜索功能

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/608123.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

重磅!大模型框架 LangChain 首个稳定版本终于来了!

著名的大模型智能体工具,现在有大版本更新了。 不知不觉,LangChain 已经问世一年了。作为一个开源框架,LangChain 提供了构建基于大模型的 AI 应用所需的模块和工具,大大降低了 AI 应用开发的门槛,使得任何人都可以基于…

oracle角色管理

常用角色 CONNECT,RESOURCE,DBA,EXP_FULL_DATABASE,IMP_FULL_DATABASE 1角色可以自定义,语法与创建用户一样 CREATE role role1 IDENTIFIED by 123; 2授权权限给角色 --自定义角色 CREATE role role1 IDENTIFIED by 123; --授权权限给角色 GRANT create view, …

AI人工智能从业人员《自然语言及语音处理设计开发工程师》证书专项培训(第二期)通知!

工业和信息化部电子工业标准化研究院联合北京龙腾亚太教育咨询有限公司和北京龙腾智元信息技术有限公司于2024年1月成功在京举办AI人工智能从业人员《自然语言及语音处理设计开发工程师》证书专项培训第一期课程,所有学员成功通过考试。介于学员的良好反应&#xff…

设置flex布局的元素,其子元素宽度和超过其本身时,其宽度值未被撑起问题

如图父元素main-content设置了display:flex. 里面包含了不确定个数的子元素,子元素样式为: flex: 1; min-width: 240px;现在想获取父元素的宽度,发现无论子元素的个数为多少,父元素的宽度都是一样的大小,并没有被子元…

ES6---判断对象是否为{}

介绍 使用es6语法判断一个对象是否为{} 示例 使用ES6的Object.keys()方法,返回值是对象中属性名组成的数组 let obj {}let keys Object.keys(obj) if(keys.length){alert(对象不为{}) }else{alert(对象为{}) }代码地址 https://gitee.com/u.uu.com/js-test/b…

Docker与微服务实战(基础篇)

Docker与微服务实战(基础篇) 1、Docker简介2、Docker安装步骤1.Centos7及以上的版本2.卸载旧版本3.yum安装gcc相关4.安装需要的软件包5.设置stable镜像仓库【国内aliyun】6.更新yum软件包索引--以后安装更快捷7.安装Docker-Ce8.启动Docker9.测试10.卸载1…

Socket closed 异常解决方案:如何解决 JMeter 压测中的问题

问题描述 JMeter 压测时会报 java.net.SocketException: Socket closed java.net.SocketException: Socket closed at java.net.PlainSocketImpl.socketConnect(Native Method) at java.net.AbstractPlainSocketImpl.doConnect(AbstractPlainSocketImpl.java:350) at java.ne…

Temu、Shopee、Lazada等跨境流量如何提升?买家号如何批量养号?

现在在temu、Lazada、shopee等跨境电商平台开店的商家越来越多。如果商家想让商店的产品得到更多的展示,流量是必不可少的,平台的流量入口主要有几个板块。 让我们谈谈temu、Lazada、shopee搜索流量如何提升,有什么方法。 有两种方法可以在短…

每日算法打卡:四平方和 day 9

文章目录 原题链接题目描述输入格式输出格式数据范围输入样例:输出样例: 题目分析示例代码二分哈希 注意 原题链接 1221. 四平方和 题目难度:简单 题目来源:第七届蓝桥杯省赛C A/B组,第七届蓝桥杯省赛Java B/C组 题目描述 四…

usb转32串口方案

方案结构图 使用usb hub芯片扩展4路usb然后再一分八路串口 USB hub 选择hub芯片注意事项: 目前市场上多数的USB 2.0 Hub芯片,只有内建一个Transaction Translators(STT),因此 当Hub接收到如Full Speed的装置进入时,12Mbps的「单一」信道…

python读取csv表格数据,生成折线图

生成一个python类,主要解决问题,读取csv表格中的数据,生成一个折线图。 输入原数据文件路径,例如: test.csv按顺序输入需要使用到的数据列,例如:1,2,3会将输入的第一列作为X轴,其他…

到了一个公司怎么发挥自己的价值呢?

本文仅凭借个人所经历过的公司展开论述,每个公司不尽相同,如有歧义可自由发言 一个团队干的时间久了,业务能总览大局,如果用户量迟迟没有暴增,业务没有拓展,技术想必也不会有较大的更新。团队日常工作处理游…

使用Moonbuilders Academy平台,学习DApp开发

Moonbeam团队于2022年宣布开放Moonbuilders Academy。这是一套以开发为中心的异步学习课程,用于学习如何在Moonbeam上构建跨链DApp。 如何从官网进入平台? 点击http://moonbeam.network 鼠标移动至 “Builders”,在Resources下方选择“Moo…

2024腾讯爱奇艺首发片单,谁能率先拿下开年爆款?

刚进入2024年,头部长视频平台就开启了新一轮“内卷”。 腾讯和爱奇艺不约而同地在2024年的第一天发布了新剧片单,多部高质量精品大剧蓄势待发,点燃了观众和市场的期待。 2023年之争已经落下帷幕,爱奇艺凭借大爆剧《狂飙》拔得头…

Next City 数都上海应用创新大赛结果公布,子虔科技获奖

12月16日,以“应变求机 以数谋新”为主题的上海城市数字化转型体验周举办。作为上海城市数字化转型年终重磅活动,上海市人民政府副秘书长庄木弟,市经济和信息化工作党委书记程鹏,杨浦区委副书记、区长周海鹰,市经济和信…

Apache ActiveMQ 远程代码执行漏洞分析

漏洞简介 Apache ActiveMQ官方发布新版本,修复了一个远程代码执行漏洞,攻击者可构造恶意请求通过Apache ActiveMQ的61616端口发送恶意数据导致远程代码执行,从而完全控制Apache ActiveMQ服务器。 影响版本 Apache ActiveMQ 5.18.0 before …

统信UOS虚拟机安装VirtualBox扩展使用USB功能

为什么要安装VirtualBox扩展包? 安装 Oracle VM VirtualBox 扩展包的原因是,它提供了对 USB 2.0、USB 3.0、远程桌面协议 VRDP(VirtualBox Remote Desktop Protocol)等实用功能的支持,以增强 VirtualBox 的功能。这些…

HarmonyOS 应用开发学习笔记 ets组件生命周期

HarmoryOS Ability页面的生命周期 Component自定义组件 ets组件生命周期官放文档 本文讲解 ets组件的生命周期,在此之前大家可以先去了解Ability的生命周期,这两个生命周期有有一定的关联性 在开始之前,我们先明确自定义组件和页面的关系&…

Redis之集群脑裂

redis集群没有过半机制会有脑裂问题,网络分区导致脑裂后多个主节点对外提供写服务,一旦网络分区恢复,会将其中一个主节点变为从节点,这时会有大量数据丢失。 规避方法可以在redis配置里加上参数(这种方法不可能百分百…

系列八、面向对象

一、面向对象 1.1、面向对象 vs 面向过程 (1)面向对象是一种对现实世界理解和抽象的方法,是计算机编程技术发展到一定阶段后的产物; (2)面向过程是一种以过程为中心的编程思想。这些都是以什么正在发生为主…