AutoComplete 设计文档

输入联想框,支持本地过滤候选、远程异步搜索、选项分组、内嵌标签与键盘选择。

← API 文档

使用建议

输入联想框,支持本地过滤候选、远程异步搜索、选项分组、内嵌标签与键盘选择。

Accessibility

ARIA role:combobox

  • combobox + aria-autocomplete="list" + listbox
  • aria-activedescendant 指向高亮候选
  • 键盘:↑↓ 移动、Enter 选中、Esc 关闭

设计变量

变量默认值用法
--cd-autocomplete-affix-text var(--cd-color-text-2)自动完成 prefix/suffix/insetLabel 文字颜色(组件消费)
--cd-autocomplete-clear-text var(--cd-color-text-2)自动完成清除按钮颜色 - 默认(组件消费)
--cd-autocomplete-clear-text-hover var(--cd-color-text-0)自动完成清除按钮颜色 - 悬停(组件消费)
--cd-autocomplete-control-bg var(--cd-input-color-bg)自动完成触发器背景颜色(组件消费,复用 Input)
--cd-autocomplete-control-border var(--cd-input-border)自动完成触发器描边颜色 - 默认(组件消费,复用 Input)
--cd-autocomplete-control-border-active var(--cd-input-border-active)自动完成触发器描边颜色 - 聚焦(组件消费,复用 Input)
--cd-autocomplete-control-border-error var(--cd-input-border-error)自动完成触发器描边颜色 - 错误(组件消费,复用 Input)
--cd-autocomplete-control-border-warning var(--cd-input-border-warning)自动完成触发器描边颜色 - 警告(组件消费,复用 Input)
--cd-autocomplete-control-disabled-bg var(--cd-color-fill-0)自动完成触发器背景颜色 - 禁用(组件消费)
--cd-autocomplete-control-disabled-text var(--cd-color-text-3)自动完成触发器文字颜色 - 禁用(组件消费)