跳到主要内容

交互模式 · 搜索

自动补全

Autocomplete

也叫:输入联想、搜索建议、自动完成、Typeahead

用户输入时在输入框下方实时列出匹配的候选项,可以用鼠标或方向键选中,减少打字和输错。

示例

详细解释

自动补全常见于搜索框(输入「手机」提示「手机壳」「手机支架」)、地址输入、选择成员或标签、邮箱后缀补全。它比下拉选择更适合选项很多的情况:用户不用在几百个选项里翻找,打几个字就能缩小范围。

要考虑的细节:输入时加防抖,避免每个字都请求;候选项里高亮匹配的文字;支持上下方向键移动、回车选中、Esc 关闭;没有匹配时显示「无结果」;请求中显示加载。还要确定能不能输入候选项以外的内容,比如搜索框可以,选择城市就不行。

注意浏览器表单的 autocomplete 属性是另一回事,它控制浏览器是否自动填充已保存的账号、地址等信息。

开发者信息
术语 ID
interaction-autocomplete
DOM 选择器
没有 DOM 线索,这个概念不在页面上直接识别。
优先级
1 · 同一层有多条命中时,优先级高的胜出
版本
v1 · 更新于 2026/09/29