纯HTML无法实现多条件筛选，必须配合JS读取data-field属性值动态过滤数据。每个筛选项应独立控件并标注data-field，避免硬编码；过滤时收集非空值构造查询对象，按字段类型（字符串匹配、数值范围等）逐项比对。
用 input + data- 属性实现轻量多条件筛选
纯 HTML 本身不支持“多条件筛选”逻辑，它只负责收数据；真正起作用的是 JS 配合结构设计。最稳妥的做法是：每个筛选项用独立的 <input> 或 <select></select>，用 data- 属性标记字段名和匹配方式，避免硬编码字段名到 JS 里。
常见错误是把所有条件塞进一个 <input type="text"> 里，靠空格或逗号分隔——这会导致模糊匹配、顺序依赖、无法区分字段，后期维护成本陡增。
- 每个筛选维度单独一个表单控件，比如：
<input type="text" data-field="name" placeholder="姓名"> - 下拉筛选用
<select data-field="status"></select>，选项值直接对应后端字段值（如<option value="active">启用</option>） - 数值范围用两个
<input type="number">，分别加data-field="price_min"和data-field="price_max" - 提交前用
querySelectorAll('[data-field]')收集非空值，构造查询对象
JS 中怎么组合多个 input 的值做过滤
关键不是“怎么写输入框”，而是“怎么读取并拼条件”。浏览器原生没有 filter() 方法能直接对 DOM 节点按多字段过滤，得自己写逻辑。
假设你有一组渲染好的数据列表（比如 items 数组），每个 item 是对象：{ name: '张三', status: 'active', price: 299 }，那么过滤函数要逐个字段比对：
立即学习“前端免费学习笔记（深入）”；
function applyFilters(items, filters) {
return items.filter(item => {
return Object.entries(filters).every(([key, value]) => {
if (value === '' || value == null) return true;
if (key.endsWith('_min')) {
const field = key.replace('_min', '');
return item[field] >= Number(value);
}
if (key.endsWith('_max')) {
const field = key.replace('_max', '');
return item[field] <= Number(value);
}
return String(item[key]).includes(String(value));
});
});
}
注意：这里默认用了 includes 模糊匹配，如果需要精确匹配（如状态字段），应在 HTML 中加 data-match="exact"，JS 中据此切换判断逻辑。
form.addEventListener('input') 还是按钮触发？
实时筛选（input 事件）体验好，但容易因频繁触发导致卡顿，尤其数据量 > 100 条时。更推荐“防抖 + 按钮触发”组合。
- 给每个
input绑定input事件时，必须用setTimeout防抖，延迟 300ms 再执行过滤 - 搜索按钮点击时，清掉未完成的定时器，立刻执行一次完整过滤
- 如果用了
<select></select>或复选框，它们的change事件不用防抖，但也要统一进同一套触发逻辑 - 不要监听
keyup——用户按住 Ctrl+V 粘贴时会漏触发
为什么不能只靠 CSS 或纯 HTML 实现多条件筛选
因为筛选本质是数据比对，HTML 是静态结构描述语言，没有运行时计算能力。有人试图用 <datalist></datalist> 或 hidden 字段模拟，结果是：条件一多就失控，排序错乱、值覆盖、移动端键盘反复弹出。
最容易被忽略的一点：后端接口字段名和前端 data-field 值必须严格一致，且大小写敏感。比如后端要 user_status，你就不能写成 data-field="status" 却不映射——调试时 80% 的“筛选无效”问题出在这里。
