前端实现搜索功能

  • 开发
  • 26

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

阅读全部

相关推荐

  5. 前端实现回车键触发搜索

    2024-01-12 05:24:05       33 阅读

  6. 前端实现导出xlsx功能

    2024-01-12 05:24:05       19 阅读

  7. React查询、搜索类功能的实现

    2024-01-12 05:24:05       42 阅读

  9. React查询、搜索类功能的实现

    2024-01-12 05:24:05       34 阅读

最近更新

  4. TCP协议是安全的吗?

    2024-01-12 05:24:05       16 阅读

  12. 阿里云服务器执行yum，一直下载docker-ce-stable失败

    2024-01-12 05:24:05       16 阅读

  13. 【Python教程】压缩PDF文件大小

    2024-01-12 05:24:05       15 阅读

  18. 通过文章id递归查询所有评论（xml）

    2024-01-12 05:24:05       18 阅读

热门阅读

  2. SpringBoot项目使用JWT令牌进行权限校验

    2024-01-12 05:24:05       28 阅读

  4. vue3-响应式基础之ref

    2024-01-12 05:24:05       33 阅读

  6. 面对24考研不尽如人意的预期，如何有效应对与规划未来？

    2024-01-12 05:24:05       32 阅读

  7. Android 8.1 默认允许应用安装未知应用

    2024-01-12 05:24:05       34 阅读

  14. Linux和windows进程同步与线程同步那些事儿（三）： Linux线程同步详解示例

    2024-01-12 05:24:05       35 阅读

  17. spring基于注解的IOC配置

    2024-01-12 05:24:05       34 阅读

  21. Python中‘字符串’和‘字符串流’的区别

    2024-01-12 05:24:05       32 阅读

  23. 【Vue】自定义指令

    2024-01-12 05:24:05       28 阅读

  24. UI自动化-Android

    2024-01-12 05:24:05       32 阅读

  25. 【2023开发组一等奖】城市小区智慧物业服务与管理系统

    2024-01-12 05:24:05       32 阅读

  26. Qt框架相关的可执行文件

    2024-01-12 05:24:05       28 阅读

  30. xtu 1279 Dual Prime

    2024-01-12 05:24:05       198 阅读