自动补全
Autocomplete
交互模式也叫：输入联想、搜索建议、自动完成、Typeahead
一句话：用户输入时在输入框下方实时列出匹配的候选项，可以用鼠标或方向键选中，减少打字和输错。
详细解释
自动补全常见于搜索框（输入「手机」提示「手机壳」「手机支架」）、地址输入、选择成员或标签、邮箱后缀补全。它比下拉选择更适合选项很多的情况：用户不用在几百个选项里翻找，打几个字就能缩小范围。
要考虑的细节：输入时加防抖，避免每个字都请求；候选项里高亮匹配的文字；支持上下方向键移动、回车选中、Esc 关闭；没有匹配时显示「无结果」；请求中显示加载。还要确定能不能输入候选项以外的内容，比如搜索框可以，选择城市就不行。
注意浏览器表单的 autocomplete 属性是另一回事，它控制浏览器是否自动填充已保存的账号、地址等信息。
示例
灰度线框示意，只表达结构，不代表具体视觉风格。
怎么跟 AI 说
可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。
「收件人」输入框做自动补全：输入 1 个字以上后，用 300ms 防抖请求联系人接口，下方列出最多 8 个匹配结果，显示头像、姓名和邮箱，匹配的文字加粗；支持上下方向键选择、回车确认、Esc 关闭；无匹配时显示「未找到联系人」。