前端分页与搜索必须“先筛后分”：用户输入后，在全量数组上filter得到完整searchResult，再按页slice渲染；多字段搜索应拼接转小写后includes匹配；需防抖、设最小长度、重置逻辑及大数据量优化。
前端分页与搜索的联合逻辑，本质是“先筛后分”：所有过滤操作必须在内存数组中完成，得到完整结果集后再按页切片。不能边分页边搜索，否则会漏掉跨页匹配的数据。
核心执行顺序要理清
用户输入关键词 → 用 filter() 在原始全量数组上做一次完整筛选 → 得到 searchResult 数组 → 再根据当前页码和每页条数，从 searchResult 中截取对应片段（如 slice((page-1)*size, page*size)）→ 渲染显示。
如果跳过这一步、直接对当前页数据再过滤，就等于只搜了第一页的内容，其他页的匹配项永远无法出现。
多字段联合搜索怎么写才不漏数据
常见错误是用 || 分别判断各字段，导致只命中第一个真值字段。正确做法是把所有待查字段拼成一个字符串再搜：
HISUI 前端框架开发指南（IRIS版）
下载
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
立即学习“前端免费学习笔记（深入）”；
- 比如对象有
name（字符串）、tags（字符串数组）、desc（字符串），先统一转小写 - 拼接为：
`${item.name} ${item.tags.join(' ')} ${item.desc}` - 再用
.includes(query.toLowerCase())判断
防抖和最小长度控制很关键
避免无效计算，提升响应感：
- 输入少于 2 个字符时，跳过 filter，直接展示全部数据或空提示
- 用 debounce 包裹搜索函数，推荐 200–300ms 延迟，防止连打触发多次遍历
- 搜索框失焦或清空时，应重置为原始全量数组，而非保留上次结果
大数据量下必须设边界
超过 5000 条数据时，纯前端 filter 明显卡顿：
- 建议前端上限控制在 1 万条以内；超量必须交由后端处理
- 可预构建索引，例如用
Map按首字母分组，或用Set存所有关键词，查表代替遍历 - 极端情况（如 16k+ 城市列表）需配合 Web Worker 移出主线程，或改用虚拟滚动+内存驱动渲染
