AutoComplete 自动完成
AutoComplete 用来辅助输入,而不是替代输入。组件提供 Rue 能力:基础建议、本地过滤、分组查找、受控 open、远程搜索、键盘 backfill、状态/变体、allowClear,以及 popup 的语义化样式扩展。
# 基础用法
最轻的输入辅助:保持自由输入,建议项只负责帮助补全,不接管最终内容。
当前输入:空
最后选择:等待选择建议项
AutoComplete 和 Select 的边界不同:这里允许用户继续自由输入,建议项只是帮助完成输入,不会锁死成“必须从列表里选”。
free inputkeyboardallowClear
# 分组查找与自定义面板
对应分组查找模式,但用 Rue 自己更轻的卡片和标签节奏重组。
当前回填文本:空
这里把分组查找体验折成 Rue 更轻的卡片面板:分组标题更克制,建议项仍保持描述与来源标记。
Runtime
useComponent lazy route
render entry bridge
Design
Mentions rich input
Transfer board
Docs
Routing guide
Rendering mechanism
# 受控开关、远程搜索与 Backfill
适合命令面板、知识库入口或大数据量搜索,展示 open 受控和 filterOption=false 的配合方式。
请求状态:idle
当前输入:空
最后选择:未选中
filterOption=false 让远程检索只走一套数据源,不做本地二次过滤。backfill 允许上下键浏览建议时先把高亮项回填到输入框,再决定是否按 Enter 确认。onOpenChange 让外部能接管面板开关,适合和埋点、请求节流一起工作。当前结果数:5。键盘操作建议:先输入关键词,再用上下键预览,最后按 Enter 确认。
# 状态、变体与清空按钮
使用 Rue 当前 input 的状态和视觉体系,让 AutoComplete 能和当前表单保持一致。
默认 + 清空
警告状态
错误 + Filled
Borderless
Underlined
API
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
options | 建议项数组,支持平铺 option 与分组 option 两种结构。 | AutoCompleteOption[] | AutoCompleteOptionGroup[] | [] |
value / defaultValue | 受控与非受控输入值;AutoComplete 仍然允许自由输入。 | string | number | - / - |
open / defaultOpen / onOpenChange | 控制或监听建议面板开关,适合远程搜索和外部联动。 | boolean / boolean / (open) => void | - / false / - |
filterOption | 内置模糊过滤开关;传函数可自定义过滤,传 false 适合远程搜索。 | boolean | (inputValue, option) => boolean | true |
onSearch | 输入搜索词时触发;和 onChange 分离,适合请求候选列表。 | (value: string) => void | - |
onChange | 输入值变化时触发,选中 option 后也会回填最终文本。 | (value: string) => void | - |
onSelect | 确认选中建议项时触发,返回 option.value 和基础 option。 | (value, option) => void | - |
allowClear | 显示清空按钮,支持自定义 clearIcon。 | boolean | { clearIcon?: any } | false |
backfill | 键盘上下切换高亮项时,把候选值临时回填到输入框里。 | boolean | false |
optionLabelProp | 决定选中后回填到输入框的字段,默认使用 value。 | string | 'value' |
popupRender / popupMatchSelectWidth | 自定义面板外壳或指定面板宽度,适合做页脚、状态提示和特殊布局。 | (originNode) => any / boolean | number | - / true |
notFoundContent | 无结果时的空态内容;传 null 可直接隐藏空态。 | any | 暂无匹配建议 |
size / status / variant | 使用 Rue 输入体系的尺寸、警告/错误状态与视觉变体。 | AutoCompleteSize / 'warning' | 'error' / 'outlined' | 'filled' | 'ghost' | 'borderless' | 'underlined' | - / - / 'outlined' |
classNames / styles | 对 root、control、input、popup、item 等语义节点追加类名或样式。 | AutoCompleteClassNames / AutoCompleteStyles | - |