前端实现搜索功能

news2024/9/22 21:29:07

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

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

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

相关文章

JavaScript版数据结构与算法(一)栈、队列、链表、集合、树

一、前言 为什么要学习数据结构与算法?最重要的就是面试要考算法,另外就是如果在实际工作当中,能够使用算法优化代码,会提升代码质量和运行效率,作为一名前端人员可能在实际中用的并不是特别多。数据结构与算法是分不…

如何使用内网穿透实现iStoreOS软路由公网远程访问局域网电脑桌面

文章目录 简介一、配置远程桌面公网地址二、家中使用永久固定地址 访问公司电脑**具体操作方法是:** 简介 软路由是PC的硬件加上路由系统来实现路由器的功能,也可以说是使用软件达成路由功能的路由器。 使用软路由控制局域网内计算机的好处&#xff1a…

文心一言 VS 讯飞星火 VS chatgpt (175)-- 算法导论13.3 4题

四、用go语言,Teach 教授担心 RB-INSERT-FIXUP可能将 T.nil.color 设为 RED,这时,当 z 为根时第1行的测试就不会让循环终止。通过讨论 RB-INSERT-FIXUP永远不会将 T.nil.color 设置为 RED,来说明这位教授的担心是没有必要的。 文…

正则表达式Regex

是什么:一句话,正则表达式是对字符串执行模式匹配的技术。 从一段字符串中提取出所有英文单词、数字、字母和数字。 如果采用传统方法:将字符串的所有字符分割成单个,根据ASCII码判断,在一定范围内就是字母&#xff…

时序预测 | Matlab基于灰色隐马尔可夫模型(HMMP-GM11)的时间序列预测

时序预测 | Matlab基于灰色隐马尔可夫模型(HMMP-GM11)的时间序列预测 目录 时序预测 | Matlab基于灰色隐马尔可夫模型(HMMP-GM11)的时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 灰色HMMP-GM11改进模型,通过引入隐马尔可夫模型(HMM)来对原始数据进行状态分…

【2023最新版】20款经济高效的开源网络安全工具推荐

如果企业还没有试用过开源工具来满足日常网络安全需求,就意味着企业可能错过了很多免费的“午餐”。需要了解的是,现在很多开源安全工具都来自活跃的知名社区,技术先进且完全可信,并且有很多专业安全公司和大型运营商都参与其中。…

干货!数字化时代下的企业合规与增长

本文提炼总结自专刊《上市公司如何打好合规与增长的双赢之战》。全书40页,出品方纷享销客市场部。如有需要,请阅读原版电子书:上市公司如何打好合规与增长的双赢之战 目 录 一、潮起:一场复杂的博弈 1. 数字经济大潮对企业提…

适合邮件推广的行业有哪些?

邮件推广因其价格便宜覆盖范围广等优势备受各个行业的企业和单位欢迎,能有效的吸引潜在客户、增加销售额、提高品牌知名度。U-Mail邮件群发平台(根据已有客户给大家总结一下适合进行邮件推广的行业 一、电子电商行业 随着电子商务的普及,越来越多的消费…

xss-labs(6-9)

level6:欢迎来到level6 老规矩还是先看看输入框的闭合情况 尝试事件函数绕过 test" onclick="alert(欢迎来钓鱼) 既然事件函数被转义了,那就使用我们第二关用过的绕过方法插入标签看看 test"><script>alert(欢迎来钓鱼)</script>// <

什么是博若莱新酒节?

在红酒圈儿里混&#xff0c;一定不能不知道博若莱新酒节&#xff0c;这是法国举世闻名的以酒为主题的重要节日之一。现已成为世界范围内庆祝当年葡萄收获和酿制的节日&#xff0c;被称为一年一度的酒迷盛会。 云仓酒庄的品牌雷盛红酒LEESON分享博若莱位于法国勃艮第南部&#x…

78.乐理基础-非常见拍号如何打拍子

内容来源于&#xff1a;三分钟音乐社 上一个内容&#xff1a;76.乐理基础-打拍子-二连音、四连音-CSDN博客 非常见的拍子就是下图中除了红圈里的五个拍号的拍号 最大优先级的规则&#xff1a; 规则一&#xff1a;所有的拍号绝对&#xff0c;永远都可以以一拍为单位&#xff0…

GEC6818 智能语音家居系统——原神主题的平板

GEC6818 智能语音家居系统——原神主题的平板 文章目录 GEC6818 智能语音家居系统——原神主题的平板一、 滑动解锁密码解锁二、 在桌面有两种方式可以进行选择2.1 普通点击模式2.1.1 电子相册2.1.2 监控2.1.3 画板2.1.4 视频播放2.1.5 五子棋小游戏2.1.6 烟雾传感器GY39RFID 2…

基于Java SSM框架实现游戏论坛平台系统项目【项目源码+论文说明】

基于java的SSM框架实现游戏论坛平台系统演示 摘要 本论文主要论述了如何使用java语言开发一个游戏论坛平台的设计&#xff0c;本系统将严格按照软件开发流程进行各个阶段的工作&#xff0c;采用B/S架构、ssm 框架和 java 开发的 Web 框架&#xff0c;基于Werkzeug WSGI工具箱和…

【EAI 005】EmbodiedGPT:通过具身思维链进行视觉语言预训练的具身智能大模型

论文描述&#xff1a;EmbodiedGPT: Vision-Language Pre-Training via Embodied Chain of Thought 论文作者&#xff1a;Yao Mu, Qinglong Zhang, Mengkang Hu, Wenhai Wang, Mingyu Ding, Jun Jin, Bin Wang, Jifeng Dai, Yu Qiao, Ping Luo 作者单位&#xff1a;The Universi…

使用 CSS : 伪元素:after、过渡动画transition实现过渡效果(鼠标悬浮或点击 标签时,底部边框从左到右过渡)

首先&#xff0c;给 <span> 标签添加一个父元素&#xff0c;定义属性类名&#xff1a;nav-wrapper &#xff0c;父级设置相对定位。然后&#xff0c;使用 ::after 伪元素来创建一个与底部边框相同宽度的元素&#xff0c;初始时宽度为 0&#xff0c;通过过渡动画transitio…

fastadmin列表头部审核通过,审核驳回按钮,输入原因post传递

index.html <a class="btn btn-success btn-change btn-start btn-disabled" data-params="action=start" data-url

UE5 将类修改目录

有个需求&#xff0c;需要修改ue里面类的位置&#xff0c;默认在Public类下面&#xff0c;我想创建一个二级目录&#xff0c;将所有的类分好位置&#xff0c;方便查看。 上图为创建一个类所在的默认位置。 接下来&#xff0c;将其移动到一个新的目录中。 首先在资源管理器中找…

TS 36.213 V12.0.0-PUSCH相关过程(3)-UE sounding过程

​本文的内容主要涉及TS 36.213&#xff0c;版本是C00&#xff0c;也就是V12.0.0。

快速入门Visual Studio 2022开发.Net Framework研发环境指南

IDE工具 Visual Studio 2022 Vs2022企业版 - VisualStudioSetup.exe Visual Studio Code VSCodeUserSetup-x64-1.66.2.exeVSCodeUserSetup-x64-1.67.0-insider.exe IDE环境 编程字体YaHei.Consolas YaHei.Consolas.1.12.ttf IDE插件 Visual Studio Code常用插件 Chinese…