自动完成AutoComplete
填写与选择一边输入，一边显示匹配建议
也常被叫作自动补全输入建议
自动完成适合地址、联系人和标签等有常见答案、但仍允许自由输入的内容。用户可以选择建议，也可以继续填写自己的内容；如果只能提交固定选项，应改用选择器 Select。
vibe coding 入门指南
vibe-ui-guide 组件图鉴
vibe 设计规范文档
容易混淆？这样区分
自动完成AutoComplete≠选择器Select
自动完成 AutoComplete 会根据输入内容给出建议；选择器 Select 不需要输入，只能从固定列表中选择。
自动完成AutoComplete≠组合框（Combobox）
组合框（Combobox）是“输入框加弹出选项”的完整控件；自动完成（AutoComplete）更强调输入后自动出现匹配建议的行为，两者在很多组件库里会被混用。
什么时候用
- 搜索框联想：输入关键词，实时给出候选vibevibe coding 入门vibe-ui-guidevibe 设计规范
- 固定后缀补全：邮箱、网址这类「半自由」输入oil-oil@oil-oil@gmail.comoil-oil@qq.comoil-oil@163.com
- 历史记录快速重选：最近搜过、用过的直接点🔍 搜索组件…最近搜索日期选择器表单校验
- 命令面板：输入指令名快速执行操作⌘ 新建➕ 新建项目📄 新建文档📁 新建文件夹
什么时候不用
- 选项是固定枚举 → 用 选择器 Select，别让用户猜全部状态全部状态进行中已完成已过期
- 数据有层级关系 → 用 级联选择器 Cascader 逐级选省 / 市 / 区广东省深圳市南山区
- 选项只有两三个 → 用 单选框 Radio 直接摆出来全部进行中已完成
- 值必须严格匹配已有数据，却允许随便输入提交城市深圳s随便打错也能提交，统计数据全乱了
组成结构 · Anatomy
vibe coding 入门指南vibe-ui-guide 组件图鉴
1输入框Input用户打字的地方，和普通输入框一样
2建议面板Suggestion Panel跟随输入实时刷新候选
3建议项Suggestion一条候选，键盘上下可选
4高亮片段Matched Text命中的关键词加亮，说明为什么推荐它
常见变体 · Variants
搜索联想Search Suggest
vibe coding 入门vibe-ui-guide
搜索框里边打字边给候选词
邮箱后缀Email Suffix
oil-oil@gmail.comoil-oil@qq.com
邮箱、网址这类半固定格式的输入
历史记录History
🕘 日期选择器🕘 表单校验
让用户一键重选最近搜过的内容
分组建议Grouped
组件按钮 Button文档按钮设计规范
候选来自不同类型,分组摆出来更清楚
典型使用场景
全局搜索框
Vibe 图鉴
🔔
按钮 Button · 组件
按钮设计规范 · 文档
单选按钮 Radio · 组件
登录邮箱输入
登录账号
oil-oil@gmail.com
oil-oil@qq.com
地址联想
收货地址
深圳市南山区科技园南区 R2-B 栋
深圳市南山区蛇口海上世界 C 区
广州市南山街道 12 号
命令面板