AutoComplete
输入联想框，支持本地过滤候选、远程异步搜索、选项分组、内嵌标签与键盘选择。
如何引入
import { AutoComplete } from '@chenzy-design/svelte';基础用法
输入时从候选列表中补全，onChange 同步值。
远程搜索
onSearch 防抖后回调由外部更新 data，配合 loading 展示加载态。
分组数据
data 传入 { label, options } 分组项，选项可为字符串或 { value, label, disabled }。
尺寸
size 控制 small / default / large 三档输入框尺寸。
前缀与清除
prefix 内嵌前缀标签，clearable 显示一键清空按钮。
城市
自定义候选项渲染
renderItem 定制下拉候选项，renderSelectedItem 定制选中后回填的文案（仅支持 string）。
搜索
下拉位置
position 控制浮层展开方向，可选 bottomLeft / bottomRight / topLeft / topRight。
禁用
disabled 禁用整个组件，不可输入也不可展开下拉。
校验状态
status 设置 warning / error 校验态，仅影响展示样式。
自定义空内容
emptyContent 自定义无候选时的下拉内容，配合 Empty 组件展示空态。
API 参考
AutoComplete
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
value | — | string | undefined |
defaultValue | — | string | '' |
data | — | ItemOrGroup[] | [] |
open | — | boolean | undefined |
defaultOpen | — | boolean | false |
placeholder | — | string | '' |
ariaLabel | combobox 输入框可访问名；缺省回退 placeholder 或 locale 默认 | string | undefined |
ariaLabelledby | 关联外部 label 的 id（优先于 ariaLabel） | string | undefined |
insetLabel | — | string|Snippet | undefined |
openOnFocus | — | boolean | false |
size | — | 'small'|'default'|'large' | default |
status | — | 'default'|'warning'|'error' | default |
disabled | — | boolean | false |
filter | — | boolean | true |
defaultActiveFirstOption | — | boolean | true |
clearable | — | boolean | false |
onSearch | — | (query: string) => void | undefined |
loading | — | boolean | false |
searchDebounce | — | number | 300 |
maxCount | — | number | 0 |
onChange | — | (v: string) => void | undefined |
onSelect | onSelectWithObject=true 时回传完整候选对象 | (value: string|number|NormalizedItem) => void | undefined |
onSelectWithObject | true 时 onSelect 入参从 value 变为 { value, label, disabled } 对象（对齐 Semi） | boolean | false |
onKeyDown | 透传输入框原始 keydown 事件（对齐 Semi） | (e: KeyboardEvent) => void | undefined |
onOpenChange | — | (open: boolean) => void | undefined |
dropdownMatchSelectWidth | 浮层宽度与触发器同宽 | boolean | true |
getPopupContainer | 浮层挂载容器 | () => HTMLElement | undefined |
dropdownClassName | 浮层 className | string | undefined |
dropdownStyle | 浮层样式 | string | Record<string, string> | undefined |
triggerRender | 完全自定义触发器 | Snippet<[{ value: string; placeholder: string; disabled: boolean }]> | undefined |
renderItem | 自定义候选项渲染 | Snippet<[{ item: NormalizedItem; isSelected: boolean }]> | undefined |
renderSelectedItem | 自定义已选项显示 | Snippet<[{ item: NormalizedItem }]> | undefined |
emptyContent | 无候选时展示内容 | Snippet | string | undefined |
prefix | 输入框前缀 | Snippet | string | undefined |
suffix | 输入框后缀 | Snippet | string | undefined |
showClear | 显示清除按钮（clearable 的别名，showClear 优先） | boolean | undefined |
clearIcon | 自定义清除图标 | Snippet | undefined |
onBlur | — | (e: FocusEvent) => void | undefined |
onFocus | — | (e: FocusEvent) => void | undefined |
onClear | — | () => void | undefined |
remote | 显式远程模式（关闭本地过滤），不依赖 onSearch 是否存在 | boolean | false |
autoFocus | 挂载自动聚焦 | boolean | false |
position | 浮层位置 | string | 'bottomLeft' |
maxHeight | 下拉浮层最大高度，number→px（对齐 Semi） | number|string | undefined |
zIndex | 下拉浮层 z-index（对齐 Semi） | number | undefined |
class | 根节点 className | string | '' |
style | 根节点内联样式 | string | '' |
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) | 自动完成触发器文字颜色 - 禁用（组件消费） |