交互模式 · 搜索
自动补全
Autocomplete
也叫:输入联想、搜索建议、自动完成、Typeahead
用户输入时在输入框下方实时列出匹配的候选项,可以用鼠标或方向键选中,减少打字和输错。
详细解释
自动补全常见于搜索框(输入「手机」提示「手机壳」「手机支架」)、地址输入、选择成员或标签、邮箱后缀补全。它比下拉选择更适合选项很多的情况:用户不用在几百个选项里翻找,打几个字就能缩小范围。
要考虑的细节:输入时加防抖,避免每个字都请求;候选项里高亮匹配的文字;支持上下方向键移动、回车选中、Esc 关闭;没有匹配时显示「无结果」;请求中显示加载。还要确定能不能输入候选项以外的内容,比如搜索框可以,选择城市就不行。
注意浏览器表单的 autocomplete 属性是另一回事,它控制浏览器是否自动填充已保存的账号、地址等信息。
开发者信息术语 ID、DOM 线索、识别优先级
- 术语 ID
interaction-autocomplete- DOM 选择器
- 没有 DOM 线索,这个概念不在页面上直接识别。
- 优先级
- 1 · 同一层有多条命中时,优先级高的胜出
- 版本
- v1 · 更新于 2026/09/29