搜索用search，筛选用filter；前者匹配用户明确关键词，后者通过多维控件组合处理模糊目标。
搜索筛选器该用 search 还是 filter？先分清场景
电商页面里，“搜索框”和“筛选器”不是一回事，混着用会直接导致用户找不到东西。搜索是用户心里有明确关键词（比如“iPhone 15 Pro 256G”），靠 input[type="search"] 匹配全文；筛选是用户目标模糊但知道维度（比如“价格＜500、品牌=小米、有现货”），得靠一组可控的控件组合——下拉、多选、滑块、日期范围等。Bootstrap 5 不提供开箱即用的“筛选器组件”，它只管样式和基础交互，逻辑得你补。
常见错误现象：form-control 塞进 dropdown-menu 后，点筛选项菜单立刻关闭；移动端点击滑块没反应；筛选后表格刷新但面包屑没更新；用户取消一个条件，其他选项没联动重置。
- 全局搜索放导航栏顶部，用
role="search"+type="search"，确保 iOS 键盘显示“搜索”按钮 - 商品列表页内的筛选区，必须独立于
navbar-collapse，否则小屏折叠后整个筛选器消失 - 筛选项之间有依赖关系（比如选了“笔记本”，“显卡型号”才出现），不能只靠 CSS 显隐，得监听
change事件动态渲染或显隐 DOM - 别把所有筛选项堆在一行：小屏下用
flex-column，中屏用row row-cols-2，大屏用row row-cols-3控制每行数量，避免高度错位
用 Bootstrap 5 实现可折叠的筛选面板
电商页面常把筛选器默认收起，点“筛选”按钮才展开，省空间又不干扰主内容流。这不能靠 data-bs-toggle="collapse" 简单套个 div 就完事——因为筛选项内部还有 input、select、range，它们聚焦时会触发 collapse 的隐藏逻辑。
关键点在于隔离事件流：
- 给筛选面板外层加
id="filter-collapse"，并设data-bs-parent="#filter-collapse"避免和其他 collapse 冲突 - 所有内部表单控件（
input、select、button）的click和focus事件里加event.stopPropagation()，否则点击输入框会意外收起面板 - 用
show.bs.collapse钩子初始化筛选状态，比如恢复上次选中的值或重置为“全部” - 移动端慎用
range滑块：iOS Safari 对 touch 事件支持弱，建议降级为双input[type="number"]（最低价/最高价）
筛选器与表格联动时容易漏掉的三件事
用户调好筛选条件，点“应用”后表格要刷新，但很多实现只改了 DOM，忘了同步状态。DataTables 插件虽能接管搜索，但它不认你的自定义筛选字段——它只处理 searching: true 对应的那个全局搜索框。
- 不要直接操作
tbody的innerHTML：选项超 200 条时，DOM 重绘卡顿明显；改用display: none切换类名，性能高且保留事件绑定 - 筛选后记得更新 URL 参数（如
?price_min=100&brand=xiaomi），否则用户刷新页面就丢掉所有筛选条件 - “清除筛选”按钮不能只清空表单值，还得手动触发一次筛选逻辑（比如调用
applyFilters()），让表格重新计算可见行——否则界面看起来清了，数据却没变
为什么电商筛选器很难做“响应式”？核心在宽度与交互密度
响应式不只是“在手机上能看”，而是“在拇指大小的触控区里能准确操作”。Bootstrap 的 form-control 默认高度是 calc(1.5em + 0.75rem + 2px)，在小屏上手指一划就点错两个 checkbox；而筛选项横向排列时，col-4 在 xs 断点下占 33%，但文字挤在一起根本读不清。
真正有效的响应式策略：
- 小屏下筛选项强制垂直堆叠：
flex-column gap-2替代row，每个筛选组加border-bottom分隔，视觉节奏清晰 - 多选标签（如“已选：小米、华为、OPPO”）必须加
text-truncate+max-width: 100%，否则长品牌名撑破容器 - 价格区间滑块在小屏禁用，改用两个
input-group：，并设min/max属性防误输 - 别依赖
col-sm-6 col-md-4控制筛选项宽度——筛选器不是栅格内容，它的宽度应由内容决定，用flex-grow-1+min-width: 0更稳
最常被忽略的是键盘导航支持：筛选器必须能用 Tab 键顺序聚焦每个控件，Enter 触发筛选，Escape 关闭面板——否则 WCAG 2.1 AA 级合规就过不了，B端客户验收时会直接卡住。
