必须用 JavaScript 实现前端文本列表筛选，因 HTML 仅描述结构、无逻辑能力；input/search/datalist 不具备过滤功能；需用 form+FormData 统一采集、data- 属性存结构化数据、防抖统一回调、数值转换与空值校验确保多条件“与”逻辑准确。
前端直接筛文本列表，必须用 JavaScript；纯 HTML 没有判断能力，input 或 select 本身不会自动过滤任何内容。
为什么不能只靠 HTML + CSS 实现多条件筛选
HTML 是静态结构描述语言，<input type="search"> 只是带清空按钮的文本框，不绑定任何逻辑；<datalist></datalist> 仅提供输入建议，不控制已有元素显隐。常见错误包括：把筛选区写成 <div class="filter"> 后手动遍历所有 <code>input，结果 name 拼错、checkbox 多选失效、空值没跳过——最终参数传不到后端，或前端过滤漏行。
用 form + FormData 统一采集条件最稳
结构语义化才能长期可维护。所有筛选控件必须包裹在 <form id="filter-form"></form> 内，每个字段的 name 必须和后端 API 参数名完全一致（比如后端要 ?category=js&status=active，前端就写 name="category" 和 name="status"）。
- 多个同名
checkbox（如品牌多选）天然被FormData收集为多个键值对，不用额外处理 -
price_min和price_max这类可能为空的字段，读取后需显式判断：if (params.price_min !== "" && params.price_max !== "") - 避免写
name="brand[]"—— 这是 PHP 风格，FormData不识别方括号，后端收不到值 - 用
Array.from(new FormData(form).entries())得到[["category", "js"], ["status", "active"]]这种数组，方便后续逐项校验和拼接
前端实时过滤时，data- 属性比文本匹配更可靠
别用 row.cells[0].textContent.includes(keyword) 做条件判断——中文空格、全角符号、大小写混杂会导致漏匹配。优先给每条列表项加 data- 属性存结构化数据：
立即学习“前端免费学习笔记（深入）”；
<div data-category="js" data-status="active" data-price="299">JavaScript 入门</div>
-
dataset自动转小写且忽略前缀（data-user-id→el.dataset.userid），命名时避开驼峰冲突 - 数值类条件必须用
parseFloat(el.dataset.price)转换，否则字符串比较'100' 会返回 <code>true - 多条件“与”逻辑必须单次遍历 +
&&连接，别链式调用.filter().filter()，否则中间某次过滤掉的行，后续条件就无从判断 - 空输入值默认应视为“不限制”，每个条件单独判断后用
&&合并，避免整行被意外隐藏
防抖 + 统一回调是避免状态错乱的关键
多个输入框（如搜索框、下拉、复选）如果各自绑 input 或 change 事件并立即执行过滤，用户快速切换时会出现“只响应最后一次”的假象——因为后触发的回调覆盖了前一次 DOM 状态。
- 所有筛选控件共用一个回调函数，例如
onFilterChange() - 函数内一次性读取全部值：
const category = form.elements.category.value;、const selectedBrands = Array.from(form.querySelectorAll('input[name="brand"]:checked')).map(cb => cb.value); - 对高频触发（尤其是
input）加防抖，延迟 300ms 再执行，移动端尤其明显 - 显隐操作统一用
classList.toggle('hidden')而非反复设style.display，避免 CSS 优先级干扰（比如原先是display: flex，设''不会还原）
真正难的不是写对一行 filter()，而是保证所有条件字段的 name 和后端参数名严丝合缝、所有空值被正确跳过、所有数值被安全转换、所有用户输入被防抖收敛——这些细节一旦漏掉，筛选就会在某个边界场景下静默失败。
