使用建议
输入联想框,支持本地过滤候选、远程异步搜索、选项分组、内嵌标签与键盘选择。
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) | 自动完成触发器文字颜色 - 禁用(组件消费) |