小数据量用前端JS过滤，大数据必须后端处理；多条件实时过滤需监听控件变更、遍历tr按非空条件组合布尔逻辑；避免innerHTML重绘，用display控制显隐；datalist仅支持单输入前缀匹配，不适用多条件搜索。
小数据量（≤1000 行）直接用 JavaScript 前端过滤最省事；大数据必须走后端，前端只传参数、收结果、渲染分页——混用会出错，不是性能问题，是逻辑断裂。
怎么用原生 JS 实现多条件实时过滤（无框架）
核心是监听所有筛选控件的变更，遍历 <tr>，对每行提取各列值，按“非空条件才参与比对”组合布尔逻辑。
<ul>
<li>
<code>input 类型用 input 事件（支持粘贴、IME 输入），select 用 change 事件
(!nameVal || cellName.includes(nameVal)) && (!deptVal || cellDept === deptVal)，注意空字符串和 undefined 都要跳过innerHTML 重绘整表——用 row.style.display = show ? '' : 'none' 更轻量data-* 属性（比如 <td data-status="active">启用</td>），务必用 cell.dataset.status 取值，别依赖 textContent
为什么 datalist 不适合多条件搜索建议
datalist 只能绑定单个 input，且浏览器只做“前缀匹配”，不支持字段联动（比如选了“部门=研发”，再输姓名时建议不能只出研发部的人）。它本质是静态词表补全，不是搜索组件。
- 常见错误：把多个
input共用同一个datalist，结果只有第一个生效 -
autocomplete="off"会彻底禁用datalist，必须改用autocomplete="search" - 超过 200 条
<option></option>就明显卡顿，移动端键盘弹出延迟，这不是代码问题，是浏览器实现限制
后端驱动时，前端怎么安全传多条件参数
关键不是“怎么发”，而是“怎么构造请求体”——GET 参数易被截获、长度受限；POST 要防 XSS 和 SQL 注入，但前端只需做好两件事。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- 所有输入值用
encodeURIComponent()编码，尤其select的空值（value=""）传过去是空字符串，后端需识别为“忽略该条件” - 避免拼接 URL 字符串，改用
URLSearchParams：const params = new URLSearchParams(); params.append('name', nameVal); params.append('status', statusVal); fetch(`/api/list?${params}`) - 不要在前端做权限过滤（比如隐藏“管理员专用字段”的输入框），后端必须校验每个参数是否属于当前用户可查范围
- 若用 POST，
Content-Type: application/json更通用，但得确保后端能正确解析req.body
真正容易被忽略的是「空条件语义」——用户没填某项，到底是“不限制”，还是“该项必须为空”？这个含义必须前后端约定死，前端传 null、"" 或干脆不传字段，后端处理方式完全不同。别默认“不传=不限制”。
