R后悔药 Rue.js
  • 首页
    • 深度指南
    • 实战例子
    • 快速上手
    • 路由指南
    • 术语表
    • 错误代码参考
  • API
    • 合作伙伴
    • 插件
    • 组件库
    • 工具链
    • Text.js
    • 新闻简报
    • 常见问题
    • 团队
    • 版本发布
    • 社区指南
    • 行为规范
    • 隐私政策
  • 赞助
  • 合作伙伴
设置
目录统计
总条目
  • 按钮 Button
  • 排版 Typography
  • 时间选择器 TimePicker
  • 下拉菜单 Dropdown
  • 悬浮操作按钮 FAB
  • 模态框 Modal
  • 切换 Swap
  • 主题控制器 Theme Controller
  • 手风琴 Accordion
  • 头像 Avatar
  • 徽标 Badge
  • 卡片 Card
  • 轮播 Carousel
  • 聊天气泡 Chat
  • 折叠面板 Collapse
  • 倒计时 Countdown
  • 描述列表 Descriptions
  • 对比 Diff
  • 二维码 QRCode
  • 悬浮 3D 卡片 Hover 3D
  • 悬浮画廊 Hover Gallery
  • 键盘提示 Kbd
  • 列表 List
  • 统计 Stat
  • 状态 Status
  • 表格 Table
  • 文本轮播 Text Rotate
  • 时间线 Timeline
  • 锚点 Anchor
  • 固钉 Affix
  • 面包屑 Breadcrumbs
  • 底部导航 Dock
  • 链接 Link
  • 菜单 Menu
  • 导航栏 Navbar
  • 分页 Pagination
  • 步骤 Steps
  • 选项卡 Tabs
  • 提示 Alert
  • 结果页 Result
  • 空状态 Empty
  • 加载 Loading
  • 全局提示 Message
  • 进度条 Progress
  • 环形进度 Radial Progress
  • 骨架屏 Skeleton
  • 通知提醒框 Notification
  • 轻提示 Toast
  • 气泡确认框 Popconfirm
  • 气泡卡片 Popover
  • 工具提示 Tooltip
  • 日历 Calendar
  • 颜色选择器 ColorPicker
  • 复选框 Checkbox
  • 字段集 Fieldset
  • 表单 Form
  • 文件输入 File Input
  • 筛选器 Filter
  • 标签 Label
  • 单选框 Radio
  • 范围选择 Range
  • 评分 Rating
  • 分段选择 Segmented
  • 自动完成 AutoComplete
  • 选择器 Select
  • 树选择 TreeSelect
  • 树控件 Tree
  • 提及输入 Mentions
  • 穿梭框 Transfer
  • 漫游引导 Tour
  • 输入框 Input
  • 数字输入 InputNumber
  • 文本域 Textarea
  • 开关 Toggle
  • 校验器 Validator
  • 分隔线 Divider
  • 弹性布局 Flex
  • 分割面板 Splitter
  • 抽屉侧边栏 Drawer
  • 页脚 Footer
  • 栅格 Grid
  • 瀑布流 Masonry
  • 布局 Layout
  • 主视觉区 Hero
  • 指示器 Indicator
  • 组合项 Join
  • 蒙版 Mask
  • 水印 Watermark
  • 间距 Space
  • 堆叠 Stack
  • 浏览器样机 Mockup Browser
  • 代码样机 Mockup Code
  • 手机样机 Mockup Phone
  • 窗口样机 Mockup Window
目录统计
总条目
  • 按钮 Button
  • 排版 Typography
  • 时间选择器 TimePicker
  • 下拉菜单 Dropdown
  • 悬浮操作按钮 FAB
  • 模态框 Modal
  • 切换 Swap
  • 主题控制器 Theme Controller
  • 手风琴 Accordion
  • 头像 Avatar
  • 徽标 Badge
  • 卡片 Card
  • 轮播 Carousel
  • 聊天气泡 Chat
  • 折叠面板 Collapse
  • 倒计时 Countdown
  • 描述列表 Descriptions
  • 对比 Diff
  • 二维码 QRCode
  • 悬浮 3D 卡片 Hover 3D
  • 悬浮画廊 Hover Gallery
  • 键盘提示 Kbd
  • 列表 List
  • 统计 Stat
  • 状态 Status
  • 表格 Table
  • 文本轮播 Text Rotate
  • 时间线 Timeline
  • 锚点 Anchor
  • 固钉 Affix
  • 面包屑 Breadcrumbs
  • 底部导航 Dock
  • 链接 Link
  • 菜单 Menu
  • 导航栏 Navbar
  • 分页 Pagination
  • 步骤 Steps
  • 选项卡 Tabs
  • 提示 Alert
  • 结果页 Result
  • 空状态 Empty
  • 加载 Loading
  • 全局提示 Message
  • 进度条 Progress
  • 环形进度 Radial Progress
  • 骨架屏 Skeleton
  • 通知提醒框 Notification
  • 轻提示 Toast
  • 气泡确认框 Popconfirm
  • 气泡卡片 Popover
  • 工具提示 Tooltip
  • 日历 Calendar
  • 颜色选择器 ColorPicker
  • 复选框 Checkbox
  • 字段集 Fieldset
  • 表单 Form
  • 文件输入 File Input
  • 筛选器 Filter
  • 标签 Label
  • 单选框 Radio
  • 范围选择 Range
  • 评分 Rating
  • 分段选择 Segmented
  • 自动完成 AutoComplete
  • 选择器 Select
  • 树选择 TreeSelect
  • 树控件 Tree
  • 提及输入 Mentions
  • 穿梭框 Transfer
  • 漫游引导 Tour
  • 输入框 Input
  • 数字输入 InputNumber
  • 文本域 Textarea
  • 开关 Toggle
  • 校验器 Validator
  • 分隔线 Divider
  • 弹性布局 Flex
  • 分割面板 Splitter
  • 抽屉侧边栏 Drawer
  • 页脚 Footer
  • 栅格 Grid
  • 瀑布流 Masonry
  • 布局 Layout
  • 主视觉区 Hero
  • 指示器 Indicator
  • 组合项 Join
  • 蒙版 Mask
  • 水印 Watermark
  • 间距 Space
  • 堆叠 Stack
  • 浏览器样机 Mockup Browser
  • 代码样机 Mockup Code
  • 手机样机 Mockup Phone
  • 窗口样机 Mockup Window

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) => booleantrue
onSearch输入搜索词时触发;和 onChange 分离,适合请求候选列表。(value: string) => void-
onChange输入值变化时触发,选中 option 后也会回填最终文本。(value: string) => void-
onSelect确认选中建议项时触发,返回 option.value 和基础 option。(value, option) => void-
allowClear显示清空按钮,支持自定义 clearIcon。boolean | { clearIcon?: any }false
backfill键盘上下切换高亮项时,把候选值临时回填到输入框里。booleanfalse
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-
页内导航
页内导航
文档
  • 深度指南
  • 实战例子
  • 快速上手
  • 术语表
  • 错误码参照表
关于
  • 常见问题
  • 团队
  • 版本发布
  • 社区指南
生态
  • 插件
  • 组件库
  • 路由指南
  • Text.js
© 2024-2026 Xiangmin Liu
Rue.JS