自动补全

本词条尚无可操作示例；插画为编辑示意，其中的候选内容均为虚构。应用到产品前仍须按所引的组合框模式验证键盘操作与读屏播报，并确认无匹配时仍可提交原始输入。

{
  "states": [
    "idle",
    "typing",
    "suggesting",
    "empty",
    "selected"
  ],
  "a11y": [
    "输入框与候选列表建立关联，当前高亮项被朗读",
    "上下键移动、回车确认、Escape 关闭列表并保留已输入内容"
  ],
  "motion": "列表直接出现，无需动画；减弱动态偏好下不做过渡"
}

{
  "id": "autocomplete",
  "type": "interaction",
  "name": {
    "zh": "自动补全",
    "en": "Autocomplete"
  },
  "aliases": [
    "Auto Suggest",
    "Typeahead",
    "输入建议",
    "联想输入"
  ],
  "granularity": "component",
  "intents": [
    "find-item",
    "prevent-error"
  ],
  "tags": [
    "输入",
    "建议",
    "搜索",
    "再认",
    "列表"
  ],
  "definition": "用户输入的同时，在输入框下方给出与已输入内容匹配的候选：用户可以选中其中一条直接完成输入，也可以不理会继续自己打完。",
  "boundary": "本词条指\"边打边给候选\"这一交互，不指浏览器或系统按历史记录自动填充表单——后者由用户代理提供，作者通常只声明字段用途。判定标准是候选来自系统的匹配且用户可以忽略；把输入直接改写成候选、或不选择就无法提交，都不是补全而是限制选项，应改用明确的选择控件。候选的排序也不是中立的：它决定了用户最可能选到什么，因此排序依据应当可解释。",
  "signature": [
    "候选随输入变化，出现在输入框相邻的弹出列表中",
    "可以用键盘在候选间移动并确认，也可以直接忽略",
    "用户输入的原文始终保留，未被候选覆盖"
  ],
  "when": [
    "目标值难以拼写或有多种写法，用户记得大概但拼不准",
    "候选集来自系统已有的确定数据，例如城市、商品或标签",
    "输入错误的代价较高，提前匹配可以减少无效提交"
  ],
  "when_not": [
    "候选只有寥寥几项，直接列出选项比让用户猜着打更快",
    "必须从固定集合中选择，补全会让用户以为可以自由输入",
    "候选来自不可解释的推荐排序，却被呈现得像是客观匹配"
  ],
  "tradeoff": "把回忆变成再认，显著降低输入负担与拼写错误，代价是候选列表本身成了一层筛选：没有出现在列表里的选项会被用户默认为不存在，而排序规则又几乎不可见。",
  "comparison": {
    "focus": "让用户认出目标而不是准确回忆并拼出它",
    "mechanism": "随输入更新的候选弹出列表，可选可忽略",
    "cost": "未出现的选项被当作不存在，排序不可见"
  },
  "sources": [
    {
      "id": "autocomplete-w3c-apg",
      "title": "W3C · ARIA Authoring Practices Guide: Combobox Pattern",
      "url": "https://www.w3.org/WAI/ARIA/apg/patterns/combobox/",
      "claim": "该模式说明组合框是带有关联弹出层的输入控件，弹出层让用户从一组值中为该输入选择取值，弹出层可以是列表框、网格、树或对话框；在一些实现中弹出层呈现允许的取值，在另一些实现中呈现建议的取值。本词条据此转述控件结构，并据以区分\"建议\"与\"限定取值\"两种用法。",
      "checkedAt": "2026-09-16",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/ARIA/apg/patterns/combobox/",
        "status": "available",
        "checkedAt": "2026-09-16T05:45:51.213Z",
        "jobId": "spn2-d4d6992153373f55a317fe7ec6043b6e8772a02b",
        "url": "https://web.archive.org/web/20260916054653/https://www.w3.org/WAI/ARIA/apg/patterns/combobox/",
        "timestamp": "20260916054653"
      }
    },
    {
      "id": "autocomplete-ui-patterns",
      "title": "UI Patterns · Autocomplete design pattern",
      "url": "https://ui-patterns.com/patterns/Autocomplete",
      "claim": "该模式把问题描述为\"用户在执行难以记忆或容易拼错的搜索任务时需要以再认为辅助\"，并建议在同一事物可以有多种输入写法、以及输入内容可以与系统中某条确定信息对应时使用；本词条的适用条件据此转述。",
      "checkedAt": "2026-09-16",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260916*/https://ui-patterns.com/patterns/Autocomplete",
        "status": "pending",
        "checkedAt": "2026-09-22T11:53:32.907Z",
        "error": "status-request-failed",
        "jobId": "spn2-64166990d3e6749fc10c28b2dbe3a1eca278d661"
      }
    }
  ],
  "relations": [
    {
      "target": "recognition",
      "kind": "realized_by",
      "condition": "用户记得目标的样子却拼不出准确写法",
      "reason": "补全把需要回忆的输入变成从候选中挑选，是再认优于回忆这一原则的一种具体实现。",
      "basis": "editorial"
    },
    {
      "target": "search-and-filter",
      "kind": "composes_with",
      "condition": "补全用于搜索框，用户仍可能直接提交原始查询",
      "reason": "补全加速找到已知项，筛选处理结果仍然过多的情况；两者常同时出现在同一条查找路径上。",
      "basis": "editorial"
    },
    {
      "target": "explainability",
      "kind": "composes_with",
      "condition": "候选的排序来自推荐或个性化而不是简单前缀匹配",
      "reason": "排在前面的候选最可能被选中，因此排序依据应当可以被说明，而不是让用户以为那是客观结果。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "候选列表出现或更新",
      "instruction": "保留用户已输入的原文，不要用候选覆盖输入框，并让候选数量的变化可被读屏察觉。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "没有任何候选匹配",
      "instruction": "明确说明\"没有匹配项\"并允许继续提交原始输入，而不是显示一个空白列表。",
      "strength": "must",
      "basis": "editorial"
    }
  ],
  "behavior": {
    "states": [
      "idle",
      "typing",
      "suggesting",
      "empty",
      "selected"
    ],
    "a11y": [
      "输入框与候选列表建立关联，当前高亮项被朗读",
      "上下键移动、回车确认、Escape 关闭列表并保留已输入内容"
    ],
    "motion": "列表直接出现，无需动画；减弱动态偏好下不做过渡"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "本词条尚无可操作示例；插画为编辑示意，其中的候选内容均为虚构。应用到产品前仍须按所引的组合框模式验证键盘操作与读屏播报，并确认无匹配时仍可提交原始输入。",
  "image": {
    "src": "/images/autocomplete.webp",
    "alt": "一张名为 FIELDNOTES 的虚构搜索框示意：输入框内有一段已输入的短文本，下方弹出五行候选，每行左侧有一小段与输入相同的深色文字、其余为灰色占位条，第二行被高亮。"
  },
  "searchTerms": [
    "input",
    "suggestions",
    "search",
    "recognition",
    "listbox"
  ]
}