搜索筛选
Search Filtering
别名:搜索筛选列表过滤即时搜索输入即搜关键字过滤筛选列表
这是什么
用即时过滤把大列表缩到与当前输入相关的一小部分：用户在搜索框敲字，列表随之实时收窄， 并显示命中数量与空结果提示。它把"查找"变成"修剪"，不用提交、不用等跳转，反馈就在眼前。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 列表条目在几十到几百条，一次加载即可全量过滤
- 用户记得目标的部分名称或标签，扫视比翻页快
- 设置、通讯录、组件库等查找型页面
✕ 不适用场景
- 数据在海量服务端集合上，必须走后端搜索
- 条目本身无明显关键词可匹配
- 需要复杂多维条件组合，应交给筛选面板
常见形式
即时过滤
Instant
输入即过滤，无提交按钮
标签筛选
Filter chips
点标签按类目过滤，可与搜索叠加
命中高亮
Highlight
匹配片段标亮，帮助确认为什么命中
实现要点
transitionmark:placeholder-shownbackground-color受控输入 + useMemo 过滤（大小写不敏感的 includes 起步），列表项配 transition 或淡入。 显示命中数；零命中展示空状态与清除按钮；命中片段用 mark 或强调色标亮。输入加 type="search" 与 aria-label，防抖仅在触发远端请求时才需要。尊重 prefers-reduced-motion。
相关概念
集中承载筛选条件的面板，常驻列表侧边或以抽屉、浮层唤起：复选组、单选、滑杆组合出当前查询。 与列表实时联动刷新结果数，并支持已选条件回显与一键清除。
组件搭配使用用快捷键（⌘K / Ctrl+K）唤出的浮动搜索面板：输入即筛选命令、页面或内容， 键盘上下选择、回车执行。macOS Spotlight 把它带入大众视野， 现在是效率工具和开发者产品的标配。
组件搭配使用用一条带边框的水平输入区收集单行文本，是表单的基本单元。 占位符提示期望格式，聚焦时高亮边框引导视线，校验失败时切换错误色 并附提示文案；可内嵌前后缀图标与清除按钮，受控管理输入值。
组件搭配使用当列表或页面没有数据时，不留一片空白，而是用插图、一句说明和一个明确的下一步操作填充。 它解决的是"用户面对空白不知道发生了什么、也不知道该做什么"的问题—— 把空档变成引导起点：首次使用教用户开始，搜索无结果给出路。
交互模式相似概念用"滚动到底自动追加下一页"取代传统分页：用户持续下滑，新内容不断出现， 底部以加载指示或哨兵元素衔接。它解决的是浏览节奏被打断的问题—— 用户不必寻找"下一页"按钮，注意力始终停留在内容流上，长列表被拆成一次次无感的追加。
交互模式相似概念