返回
UI · №19 · SPECIMEN
自动补全框Combobox
打字时下面弹建议的输入框能搜能选的下拉框输入联想
LIVE SPECIMEN真的能玩，点点看
先看结论
会根据输入实时过滤建议列表的文本框，键盘上下选、回车定。
- 适合
- 选项多到下拉翻不动的场景——城市、国家、用户、标签。
- 不适合
- 选项少于 7 个——普通 Select 更简单更好懂。
直接发给 agent
Use a combobox for the city field: a text input that filters a suggestion list as you type, keyboard navigation with arrow keys, Enter to select, role="combobox" with aria-expanded.已于 2026-07-17 实测通过
技术标注2 项
- web
- role="combobox" + aria-expanded + listbox
- react
- <Combobox>（Headless UI/cmdk）
详细说明
Combobox 是「搜索」和「选择」的杂交：当选项列表长到翻不动时，它让用户用打字代替翻找。选项少时它反而是负担——多了一层“要不要打字”的心智。