Search Field
搜索框
WebMobileDesktop上手难度: 中等
一个专门用来找东西的输入框，通常带放大镜图标和清除按钮。
Live Demo
真的可以点你刚才看到的这个：App 首页顶部那个带放大镜的胶囊形输入框、电商App 搜索页顶部的搜索条、Mac Spotlight 弹出的搜索框。
它到底是什么
Search Field 是有状态的输入框：它不仅接收文字，还要负责展示结果、处理空结果、处理搜索历史。它和普通输入框的最大区别在于「边打边搜」和「可清除」。
搜索栏search fieldsearch barsearch input搜索输入
Anatomy · 它由什么组成
Search Icon放大镜
左侧 16px 图标
Input输入区
背景用浅灰区分于普通输入框
Clear Button清除
有文字时出现 X 图标
Results结果列表
下拉展示，键盘可上下选
Empty State空结果
提供热门词或建议
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 内容超过 30 项且用户知道要找什么 | 用 |
| 需要边输入边出结果 | 用 |
| 搜索范围是结构化的（按类型/标签筛） | 用 |
| 内容只有 5 项且都能看见 | 不用 |
| 用户根本不知道自己要找什么（探索型浏览） | 不用 |
搜索框在空状态下应该给出「热门搜索 / 最近搜索 / 分类入口」，不然它就是一根空输入框。
搜索结果为零时，必须给替代路径（清空筛选、看全部）。
Similar Patterns
别搞混一句话区分：一个专门用来找东西的输入框，通常带放大镜图标和清除按钮。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
加一个搜索框：左侧放大镜，输入时 300ms 防抖实时出结果，右侧有清除按钮，空状态显示热门搜索标签。
不要只对 AI 说
Bad → Better不要这样对 AI 说
加个能搜索的东西。
改成这样说
加 Search Field：左侧放大镜图标、300ms 防抖实时出结果、有文字时右侧出现清除按钮、空状态显示热门搜索 Chip、↑↓ 可选结果。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。