自动补全输入（Combobox / Autocomplete）是什么：效果预览与 AI 设计提示词

效果预览

北3 个匹配

北北京 · 中国

北北九州 · 日本

北北岸 · 新西兰

适合用在哪

城市选择、标签输入、成员选择、搜索任何有限集合。

容易踩的坑

没有 role="combobox" 和 aria-activedescendant，方向键移动时读屏不播报当前选项。
每敲一个字就发请求不做防抖，网络慢时旧结果覆盖新结果出现错乱。
面板贴近视口底部时不翻转到上方，移动端被软键盘遮住看不到选项。

设计提示词 · Prompt

自动补全输入（Combobox / Autocomplete）：输入框本身在聚焦时显示品牌描边 + 3px 光晕；下方 4px 处浮出结果面板（白底、1px 描边、8px 圆角、大投影、与输入框同宽），列表项含图标 + 文字，键盘 ↑↓ 导航时当前项用品牌实心反白（与鼠标悬停同样式），Enter 选中。过滤逻辑高亮命中字符（品牌色加粗）。面板出现用 120ms 淡入 + 4px 上移。列表最多显示 7 项后内部滚动。空结果也要有面板："没有找到 xxx，换个关键词试试"。

Combobox / Autocomplete: when focused, the input itself shows a brand-color border + 3px glow; a results panel floats 4px below (white background, 1px border, 8px border radius, large shadow, same width as the input). List items contain an icon + text; when navigating with the ↑↓ keys, the current item is shown inverted on solid brand color (same style as mouse hover), and Enter selects it. Filtering highlights matched characters (brand color, bold). The panel appears with a 120ms fade-in + 4px upward shift. The list shows at most 7 items before scrolling internally. Empty results still need a panel: "No results for xxx, try another keyword".

常见搭配

同一页面里经常和「自动补全输入」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

命令面板Command Palette 筛选标签Filter Chips 实时播报ARIA Live Region 锚点定位Anchor Positioning

演示 HTML 结构

<div class="s d-combo">
  <div class="d-combo__input">北<span class="d-combo__cur">3 个匹配</span></div>
  <div class="d-combo__list">
    <div class="d-combo__item is-on"><span class="d-av d-av--sm d-av--sq">北</span>北京 · 中国</div>
    <div class="d-combo__item"><span class="d-av d-av--sm d-av--sq">北</span>北九州 · 日本</div>
    <div class="d-combo__item"><span class="d-av d-av--sm d-av--sq">北</span>北岸 · 新西兰</div>
  </div>
</div>