COMPONENT 33 · Selection & Values

组合框 / 自动补全

Combobox / Autocomplete

也叫AutocompleteTypeaheadSearchable Select自动完成NSComboBox

把文本输入与建议列表结合，支持搜索并选择或创建值。

Combines text input with suggestions so users can search and select or enter a value.

ANATOMY & USAGE

结构与使用建议

组成部分

文本输入
展开按钮
建议列表

适合使用

选项很多、需要搜索或允许自定义输入时。

不建议使用

选项很少且简单 Select 或单选组更清楚时。

键盘与无障碍

正确维护 combobox、aria-expanded、aria-controls、aria-activedescendant，并支持方向键与 Escape。

DESCRIBE IT TO AI

这样告诉编程助手

实现组合框 / 自动补全（Combobox / Autocomplete）：把文本输入与建议列表结合，支持搜索并选择或创建值。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY

<label class="demo stack" for="city">
  <span>城市</span>
  <input id="city" role="combobox" aria-expanded="false" aria-controls="cities" list="cities">
  <datalist id="cities">
    <option value="北京">
      <option value="上海">
        <option value="深圳">
        </datalist>
      </label>