Autocomplete / 自动完成
输入框的自动完成控制。
基础的
基础示例,添加备选列表到输入框中。
只允许选择输入
只通过 Select 事件更改值。
禁用
禁用所有的交互。
搜索
根据当前输入内容变更备选的列表选项。
搜索中
在搜索中的等待时显示友好的 UI 与提示。
定制搜索中的提示
你可以用文字或任何组件替代默认的提示文字。
定制无结果
你也可以用文字或任何组件替代默认的无搜索结果提示。
定制选项
你可以详细定制每一个备选项,让 自动完成
组件表达更多的信息。
可清除的
在输入框内添加一个用作清除文字的按钮。
可创建的
为任意值添加待选条目。
APIs / 接口文档
AutoComplete.Props
属性 | 描述 | 类型 | 推荐值 | 默认 |
---|---|---|---|---|
options | 输入框的可选项 | AutoCompleteOptions | - | - |
status | 输入框类型 | AutoCompleteTypes | AutoCompleteTypes | default |
initialValue | 初始值 | string | - | - |
value | 命令式的输入框的值 | string | - | - |
width | 组件容器的宽度 | string | - | - |
clearable | 是否显示清除按钮 | boolean | - | false |
searching | 是否显示正在搜索中 | boolean | - | false |
onChange | 输入框的值发生变化触发此事件 | (value: string) => void | - | - |
onSearch | 搜索事件,当用户手动输入时触发 | (value: string) => void | - | - |
onSelect | 当备选框被选中后触发的事件 | (value: string) => void | - | - |
dropdownClassName | 自定义下拉框的类名 | string | - | - |
dropdownStyle | 自定义下拉框的样式 | object | - | - |
disableMatchWidth | 禁止 Option 跟随父元素的宽度 | boolean | - | false |
disableFreeSolo | 只允许 Select 事件更改值 (禁止 Input 输入随意值) | boolean | - | false |
getPopupContainer | 下拉框渲染的父元素,默认是 body | () => HTMLElement | - | body |
ref | 转发的原生输入框 Ref | Ref<HTMLInputElement | null> | - | - |
... | 原生属性 | InputHTMLAttributes | 'id', 'className', ... | - |
AutoComplete.Item
[别名: AutoComplete.Option
]
属性 | 描述 | 类型 | 推荐值 | 默认 |
---|---|---|---|---|
value | 用于鉴别多个备选项的唯一值 | string | - | - |
... | 原生属性 | HTMLAttributes | 'id', 'className', ... | - |
AutoComplete.Searching
属性 | 描述 | 类型 | 推荐值 | 默认 |
---|---|---|---|---|
... | 原生属性 | HTMLAttributes | 'id', 'className', ... | - |
AutoComplete.Empty
属性 | 描述 | 类型 | 推荐值 | 默认 |
---|---|---|---|---|
hidden | 隐藏无结果提示框 | boolean | - | false |
... | 原生属性 | HTMLAttributes | 'id', 'className', ... | - |
type AutoCompleteOptions
Array<{
label: string
value: string
} | AutoComplete.Item>
AutoCompleteTypes
type AutoCompleteTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
文档贡献者