前端实现搜索功能

9月前作者：百思不得小李分类：Toy博客阅读(28) 违法举报

这篇具有很好参考价值的文章主要介绍了前端实现搜索功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

最近遇到一个需求，用户在输入框输入关键字之后，点击搜索按钮后进行搜索，如下图，选中的数据在下面，上面展现的是搜索后的数据，现在选中了2条数据：
前端实现搜索功能,JS实战记录,vue2,前端
当用户输入KET后点击搜索，搜出的结果有16条，勾选全选选中后，将选中的16条的数据加到之前已选的2条数据里，于是此时已选的数据里有了18条

当我清空搜索词，点击搜索后，结果如下，上面还原到了最开始的21条数据，然后已选的里面还是18条数据：
前端实现搜索功能,JS实战记录,vue2,前端
当我们点击下一步时，会将已选的18条数据带到下一步的逻辑里。为了实现上面的效果，初始数据originList，页面上展示的数据myOriginList，选中的数据selectArr，是否全选中checkAll，实现思路是点击搜索按钮后，触发search方法，先判断输入框是否有搜索词，区别处理，如果有搜索词的话，先拷贝一份源数据originList，也就是先拷贝一份初始数据，然后通过数组的filter+includes方法实现过滤，将过滤后得到的数组回显到页面myOriginList上&#x文章来源地址https://www.toymoban.com/news/detail-819682.html

到了这里，关于前端实现搜索功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

前端（四）——vue.js、vue、vue2、vue3

😊博主：小猫娃来啦 😊文章核心： vue.js、vue、vue2、vue3从全局到局部 Vue.js是一款流行的JavaScript框架 vue,vue2,vue3都是vue.js的不同版本。 Vue：Vue.js的第一个版本，也称为Vue 1.x。它于2014年首次发布，并获得了广泛的应用和认可。 Vue2：Vue.js的第二个版本，也称为Vue 2.x。它在Vu

2024年02月12日
浏览(75)
实现微信内置浏览器分享功能（前期准备+VUE前端部分代码+调试+坑记录）

一、基础准备 1、登录微信公众号(需已认证)，找到[【设置与开发】[【公众号设置】【功能设置】【js接口安全域名]，在下面填写你的域名。 2、在【设置与开发】【基本配置】中拿到 appid开发者密码 appSecret ，给后端用生成签名时用到。二、前端代码部分 1、下载微信sdk 2、

2024年04月17日
浏览(39)
jeecg-boot Vue2前端-下拉搜索框j-search-select-tag

官网提到了怎么弄，但是很多细节官网还没完善的，我个人作为开发者提供一下代码给你们参考以及使用以上是效果现在讲下实现的过程此处是jeecg-boot 官网封装好的一个组件，这个组件。 sys_depart,depart_name,id 这个的意思是去 sys_depart 表里，查询的列 depart_name ， id = key

2024年01月17日
浏览(46)
【前端vue升级】vue2+js+elementUI升级为vue3+ts+elementUI plus

gogo code 是一个基于 AST （源代码的抽象语法结构树状表现形式）的 JavaScript/Typescript/HTML 代码转换工具，可以用它来构建一个代码转换程序来帮助自动化完成如框架升级、代码重构、多平台转换等工作。当前 GoGoCode 支持解析和操作如下类型的代码： ○JavaScript(JSX) ○Typescript

2024年02月12日
浏览(51)
【前端】在Vue2中使用Vanta.js炫酷动态背景(全屏背景)

官网：https://www.vantajs.com/ 由于博主在参考官网及官方GitHub进行应用时遇到一些问题，因此写了该篇博客，以避免大家因找Bug而浪费时间，方便快速的应用。注意版本 Vue的版本如下 “vue”: “^2.6.14” 渲染容器导包方法完整代码：完整代码：参加颜色参数如果报错：‘X

2024年02月11日
浏览(48)
前端Vue自定义带历史记录的搜索框组件searchBar 支持搜索输入框清空搜索历史存储记录清除

前端Vue自定义带历史记录的搜索框组件searchBar 支持搜索输入框清空搜索历史存储记录清除，下载完整代码请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=13343 效果图如下: 使用方法 HTML代码实现部分

2024年02月16日
浏览(40)
前端如何实现搜索记录展示以及清楚历史搜索记录

div class=\\\"historydata\\\" v-show=\\\"input\\\" div历史搜索/div ul class=\\\"\\\" li v-for=\\\"(item, index) in historyList\\\" :key=\\\"index\\\" class=\\\"text\\\" {{ item }} /li /ul /div mounted() { if (JSON.parse(localStorage.getItem(\\\"history

2024年02月06日
浏览(45)
前端项目部署自动检测更新后通知用户刷新页面（前端实现，技术框架vue、js、webpack）——方案一：编译项目时动态生成一个记录版本号的文件

当我们重新部署前端项目的时候，如果用户一直停留在页面上并未刷新使用，会存在功能使用差异性的问题，因此，当前端部署项目后，需要提醒用户有去重新加载页面。 vue、js、webpack 编译项目时动态生成一个记录版本号的文件轮询（20s、自己设定时间）这个文件，判断版

2024年02月02日
浏览(61)
持续不断更新中... 自己整理的一些前端知识点以及前端面试题，包括vue2，vue3，js，ts，css，微信小程序等

答：在普通的前端项目工程中，在script标签中增加setup即可使用api 使用setup()钩子函数答：不要在计算属性中进行异步请求或者更改DOM 不要直接修改computed的值区别：计算属性值基于其响应式依赖被缓存，意思就是只要他之前的依赖不发生变化，那么调用他只会返回之前缓

2024年02月11日
浏览(58)
前端实现搜索功能

最近遇到一个需求，用户在输入框输入之后，点击搜索按钮后进行搜索，如下图，选中的数据在下面，上面展现的是搜索后的数据，现在选中了2条数据：当用户输入KET后点击搜索，搜出的结果有16条，勾选全选选中后，将选中的16条的数据加到之前已选的2条数据里，于

2024年01月24日
浏览(28)