Autocomplete / 自动完成

输入框的自动完成控制。

基础的

基础示例,添加备选列表到输入框中。

只允许选择输入

只通过 Select 事件更改值。

禁用

禁用所有的交互。

搜索

根据当前输入内容变更备选的列表选项。

搜索中

在搜索中的等待时显示友好的 UI 与提示。

定制搜索中的提示

你可以用文字或任何组件替代默认的提示文字。

定制无结果

你也可以用文字或任何组件替代默认的无搜索结果提示。

定制选项

你可以详细定制每一个备选项,让 自动完成 组件表达更多的信息。

可清除的

在输入框内添加一个用作清除文字的按钮。

可创建的

为任意值添加待选条目。

APIs / 接口文档

AutoComplete.Props

属性描述类型推荐值默认
options输入框的可选项AutoCompleteOptions--
status输入框类型AutoCompleteTypesAutoCompleteTypesdefault
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转发的原生输入框 RefRef<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'