SuperAPI AI 工具集

autocomplete

前端与建站

查看项目

更新于 10-16 04:23

技能介绍

Autocomplete 是一种在用户输入过程中实时建议选项的交互模式,属于表单与输入类 UX 模式。它的核心价值在于将文本输入的灵活性与下拉式选择的确定性结合起来,根据用户键入内容给出实时匹配的建议,从而减少错误、加快数据录入并提升表单完成率。

用途与适用场景 Autocomplete 适合以下情况:用户需要从大量预定义选项中选择,例如国家选择、机场代码;用户需要比滚动长下拉列表更快的选项选择方式;通过引导用户选择有效输入来减少错误;输入具有有限、已知的有效响应集合;以及需要把自由文本输入与建议功能结合使用。

不适用场景 在以下情况应避免使用:可选项少于 10 个(改用标准下拉/select);用户输入完全自由、无限制的文本;需要同时展示所有选项以便对比;网络延迟明显拖慢建议结果返回;输入字段要求逐字精确输入(如密码)。

主要能力 该模式提供实时建议、输入与选择结合、减少错误与加快录入等能力,并强调可访问性、性能和交互层面的保障。

实施工作流

  1. 在复制示例前,先确认该模式与当前问题及约束条件匹配。
  2. 从 references/pattern.md 中的结构和示例入手,选择最小可行变体。
  3. 在叠加视觉打磨之前,先应用可访问性、性能和交互护栏。
  4. 使用测试指南验证键盘、屏幕阅读器、响应式和失败场景下的行为。

可访问性护栏

  • 确保输入框有标签,并声明为 combobox(role="combobox"、aria-expanded、aria-controls)。
  • 支持完整键盘交互:ArrowUp/ArrowDown、Enter、Escape 和 Tab。
  • 使用 aria-activedescendant 和稳定的选项 ID 暴露当前激活选项上下文。
  • 向屏幕阅读器播报加载、空结果和错误状态。
  • 保持建议内容可读:足够对比度和可见焦点样式。

相关模式 https://uxpatterns.dev/patterns/autocomplete/do-dont-accessibility-1 https://uxpatterns.dev/patterns/autocomplete/do-dont-content-1 https://uxpatterns.dev/patterns/autocomplete/do-dont-visual-design-2 https://uxpatterns.dev/patterns/forms/date-picker https://uxpatterns.dev/patterns/forms/multi-select-input https://uxpatterns.dev/patterns/forms/text-field

完整实现细节、示例与测试说明见 references/pattern.md。 模式页面:https://uxpatterns.dev/patterns/forms/autocomplete

限制 关于收费、价格、平台支持范围、具体性能数据等在所给资料中暂未提供。