原生HTML不支持运行时多条件筛选，必须用JavaScript配合data属性和filter()实现；需监听表单变化、类型转换、合理处理多选与模糊匹配，并设计清晰条件结构避免硬编码。
原生 HTML 本身不支持运行时多条件筛选逻辑，必须配合 JavaScript 才能实现。所谓“原生语法”仅指不依赖 jQuery 或框架，用 document.querySelectorAll()、Array.prototype.filter() 等标准 API 完成。
用 querySelectorAll() + filter() 做 DOM 多条件匹配
这是最贴近“HTML 原生”的做法：HTML 提供结构和数据属性（如 data-category、data-price），JS 负责读取并筛选。
常见错误现象：直接写 div[data-category="book"][data-instock="true"] 只能静态匹配，无法响应用户实时选择的多个下拉框或复选框。
- 把筛选条件存在
data-属性里，比如：<div class="item" data-category="book" data-rating="4.5" data-price="29.9"> <li>监听表单控件变化（<code>select[multiple]、input[type="range"]、input[type="checkbox"]），收集当前所有有效条件 - 对所有候选元素调用
.filter()，每个条件单独判断，用&&连接（AND 关系）或some()（OR 关系） - 注意数值比较要转类型：
parseFloat(el.dataset.price) >= minPrice，否则字符串比较会出错（"100" 为 true） -
select的value应设为唯一标识符（如value="php"），避免空格或特殊字符 - 获取选中值用：
Array.from(select.selectedOptions).map(opt => opt.value) - 筛选时别写死
el.dataset.tag === selected[0] || el.dataset.tag === selected[1]，改用selected.includes(el.dataset.tag) - 若需“同时满足多个标签”（如必须含 php 且含 mysql），则用
selected.every(tag => el.dataset.tags?.split(' ').includes(tag))，前提是后端把多值存成空格分隔字符串 -
datalist的option必须带value，否则无效果 - 它只影响输入体验，筛选仍要靠 JS 读取
input.value后手动比对 - 若想模糊匹配（如输入“py”显示“python”“pypi”），得自己写
includes()或正则，datalist不提供该能力
select[multiple] 提交的值怎么当筛选条件用
用户在 <select multiple></select> 中选了多个选项，后端或 JS 需按这些值过滤数据。但原生提交是字符串数组（如 ["web", "php"]），不能直接塞进 querySelector。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
使用场景：权限标签筛选、技术栈多选、商品分类多选。
用 datalist 做条件输入提示，但别指望它帮你筛选
datalist 只提供输入建议，不参与筛选逻辑。有人误以为绑了 list 就能自动过滤，其实它完全不干涉后续 JS 判断。
容易踩的坑：把 datalist 当成筛选器，结果用户输错字或选了建议外的内容，后续条件就断掉了。
真正麻烦的不是写法，而是条件组合的语义处理——比如“价格区间 AND 类别 OR 标签包含”，这种嵌套逻辑光靠属性匹配很难干净表达，得提前设计好数据结构（如统一用对象描述条件），再让 JS 解析执行。不然很快就会变成一堆 if/else 堆出来的硬编码分支。
