## 28 · 搜索框 Search

### 28.1 用途
用关键词从长列表里取回一小段结果；移动端的搜索框几乎总是页面顶部的独立一行，输入即过滤（不等回车），并且要给出一个明确的退出动作 —— 取消，因为触屏没有 Esc 键，用户清空关键词后仍需一键回到列表。

### 28.2 结构（anatomy）
- `search`：根元素，一行里放进「搜索框 + 取消动作」
- `icon`：框内左侧放大镜，纯装饰（不承载语义，读屏由 label 承担）
- `control`：原生 `input type="search"`，占满剩余宽度
- `clear`：可选清除按钮，有值且清除可用时出现在图标与取消之间
- `cancel`：可选取消动作，默认文案「取消」，由 showCancel 控制显隐

### 28.3 变体维度
- `round`：`true`（胶囊形，页面顶部常用）/ `false`（方角，嵌在卡片或工具栏里）
- `showCancel`：`false`（只有输入框）/ `true`（右侧出现取消动作）

### 28.4 状态
- default：常态
- filled：有值（清除按钮出现）
- disabled：置灰且不可聚焦

### 28.5 交互与触控
- 搜索框高度不小于 44px，取消动作热区不小于 44px
- 输入即触发 input 事件（不等回车）；键盘「搜索」键触发 search 事件
- 清除按钮只在有值时出现，点击清空并把焦点留在输入框
- 清除与取消都是 44px 热区；两者同时出现时先清除、再取消（自右向左层级递进）

### 28.6 无障碍
- 输入框用原生 `input type="search"`（iOS 键盘右下角键位变成「搜索」）
- 搜索图标是装饰性的，置 `aria-hidden="true"`，名称由 `aria-label` 给出
- 清除按钮是原生 `button` 且带 `aria-label="清除"`；取消动作是原生 `button`
- 取消按钮不用图标代替文字（触屏上文字比图标更好点）

### 28.7 doNotInvent
- 搜索的防抖时值与接口节流策略（由宿主决定）
- 搜索历史的存储与展示
- 搜索结果的高亮规则

### 28.8 unknowns
- 取消文案是否允许替换（如「返回」）
- 是否需要自动聚焦并拉起键盘
- 语音/扫码等扩展入口是否放进框内

---