前端实现搜索功能

最新推荐文章于 2025-03-14 10:58:26 发布
最新推荐文章于 2025-03-14 10:58:26 发布
阅读量1.1k 收藏 7
点赞数 7
分类专栏： JS实战记录 vue2实战记录 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37635012/article/details/135482469
版权
本文介绍了前端如何实现搜索功能并结合选择操作。当用户输入关键词后，搜索结果显示并允许用户选择，全选功能可以将搜索结果添加到已选列表。在清空搜索词后，初始数据恢复，已选列表保持不变。实现过程中，通过判断搜索词是否存在来决定数据处理方式，利用数组方法如filter和includes进行数据过滤和更新，同时管理全选状态和已选数据的同步。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

最近遇到一个需求，用户在输入框输入关键字之后，点击搜索按钮后进行搜索，如下图，选中的数据在下面，上面展现的是搜索后的数据，现在选中了2条数据：
在这里插入图片描述
当用户输入KET后点击搜索，搜出的结果有16条，勾选全选选中后，将选中的16条的数据加到之前已选的2条数据里，于是此时已选的数据里有了18条
在这里插入图片描述
当我清空搜索词，点击搜索后，结果如下，上面还原到了最开始的21条数据，然后已选的里面还是18条数据：
在这里插入图片描述
当我们点击下一步时，会将已选的18条数据带到下一步的逻辑里。为了实现上面的效果，初始数据originList，页面上展示的数据myOriginList，选中的数据selectArr，是否全选中checkA

了解本专栏 订阅专栏 解锁全文 超级会员免费看
uniapp前端实现搜索功能
weixin_44784777的博客
10-17 2114
uniapp，搜索
前端实现-搜索关键字标红处理
十二指环的博客
10-10 386
【代码】前端实现-搜索关键字标红处理。
JS实现前端页面的搜索功能
10-18
主要介绍了JS实现前端页面的搜索功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
JavaScript实现前端实时搜索功能
10-20
主要为大家详细介绍了JavaScript实现前端实时搜索功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
【前端所学分享1】：搜索历史记录功能的实现
最新发布
m0_63622060的博客
03-14 659
检查是否有过这个记录，如果有过将其删除后重新添加在列表最前面。index.vue。
纯前端实现搜索功能
abc234ABC的博客
02-17 4762
1、搜索框 <el-input class="search" placeholder="标题" v-model="select_word" size="mini" style="width: 230px;" prefix-icon="el-icon-search"> </el-input> 2、设置teamDate为搜索后数据 data () { return { tableData: [], tempData: [], se
纯前端如何实现搜索关键字功能，且为搜索关键字添加颜色
呆萌小菜鸟的博客
01-24 1725
菜鸟随记
前端自己做搜索功能
weixin_42065942的博客
09-25 3836
前端做搜索功能 最近项目开发中，遇到了一个问题，前端做搜索，废话不多说，直接上图 相信很多时候在项目中做搜索的时候都是直接掉后台api,方便快速，自己工作量也比较少，但是一旦前端做搜索的时候不知道怎下手了，我先简单介绍一下我的结构目录 html结构 <div class="problem"> <div class="wentis"> <i class="iconfont iconlujing7 wen"></i> <div
前端实现关键词搜索
qq_39321234的博客
12-18 1042
思路是通过点击不同的选择项给keyword赋不同的值，来展示不同的关键词选择框，属于是代码写的很傻，但是很好用的那种。图片这里不清晰，哪次我把服务跑起来再更新图片。
前端搜索功能的简单实现
nunumaymax的博客
10-18 1万+
用js完成前端的搜索功能前言js 前言 有的时候，后台并没有提供搜索功能的cgi供前端使用去搜索用户想要查找的内容，这个时候就需要我们前端自己对所有数据进行过滤处理，筛选出与用户搜索内容相匹配的数据进行显示。 js 通常使用原生中的indexOf方法进行数据筛选，代码如下： //search_data:过滤后的数据 //$scope.all_data:从后台获取到的所有数据 //$scope...
前端搜索功能（二）
M_SSY的博客
05-29 1129
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;实时查询城市通过姓名或拼音简写&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &amp
前端页面实现搜索
qq_69775429的博客
04-23 683
this.user=this.userGgList 数据操作时总是进行= ，应该使用this.user=JSON.parse(JSON.stringify(this.userGgList))进行数据操作。数组方法不熟悉，最开始使用的findIndex只能进行精确搜索，不能实现模糊搜索，没有想到其他方法，以及数组方法的返回值也不够熟悉，建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。的内置方法之一，用于查找指定元素在数组中的索引位置。找到元素返回元素的索引值，找不到返回-1；
Web前端之Vue实现搜索功能
CSDN博客主页地址：https://mengjian.blog.csdn.net/
04-21 4156
Web前端之Vue实现搜索功能
前端实现菜单搜索搜索（功能模版）
码农研究僧的博客
03-31 1313
前端实现菜单搜索搜索（功能模版）
前端开发攻略---根据搜索关键字实现搜索结果列表文字高亮效果，100%匹配关键字。
nibabaoo的博客
04-22 1511
根据搜索关键字实现搜索结果列表文字高亮效果
前端搜索功能（一）
M_SSY的博客
05-29 2648
前端搜索功能整理了五个，大家根据需要自取&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;前端搜索功能&lt;/title&gt; &lt;/head&gt; &lt;body&amp
纯前端搜索功能
chabaimgg的博客
12-28 450
【代码】纯前端搜索功能。
前端搜索
chizhen3543的博客
06-17 138
思路：使用indexOf或正则表达式 转载于:https://my.oschina.net/fyzhu/blog/3063065
前端页面的搜索功能的实现
热门推荐
淡淡人生过的博客
06-04 3万+
&lt;input type="text" id="campus" class="layui-input" onkeyup="ck(this.value);" placeholder="请输入要查找的英语屋"&gt;//输入触发框 &lt;div class="layui-inline" id="campus"&gt;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值