You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

3.2 KiB

category subtitle type cols title cover
Components 自动完成 数据录入 2 AutoComplete https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg

输入框自动完成功能。

何时使用

需要自动完成时。

API

参数 说明 类型 默认值 版本
allowClear 支持清除, 单选模式有效 boolean false
autoFocus 自动获取焦点 boolean false
backfill 使用键盘选择选项的时候把选中项回填到输入框中 boolean false
children (自定义输入框) 自定义输入框 HTMLInputElement

HTMLTextAreaElement

React.ReactElement<InputProps>
<Input />
children (自动完成的数据源) 自动完成的数据源 React.ReactElement<OptionProps>

Array<React.ReactElement<OptionProps>>
-
defaultActiveFirstOption 是否默认高亮第一个选项。 boolean true
defaultValue 指定默认选中的条目 string
disabled 是否禁用 boolean false
filterOption 是否根据输入项进行筛选。当其为一个函数时,会接收 inputValue option 两个参数,当 option 符合筛选条件时,应返回 true,反之则返回 false boolean or function(inputValue, option) true
getPopupContainer 菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。示例 Function(triggerNode) () => document.body
placeholder 输入框提示 string -
value 指定当前选中的条目 string
onBlur 失去焦点时的回调 function() -
onChange 选中 option,或 input 的 value 变化时,调用此函数 function(value)
onFocus 获得焦点时的回调 function() -
onSearch 搜索补全项的时候调用 function(value)
onSelect 被选中时调用,参数为选中项的 value 值 function(value, option)
defaultOpen 是否默认展开下拉菜单 boolean -
open 是否展开下拉菜单 boolean -
onDropdownVisibleChange 展开下拉菜单的回调 function(open) -
notFoundContent 当下拉列表为空时显示的内容 ReactNode -

方法

名称 描述 版本
blur() 移除焦点
focus() 获取焦点

FAQ

为何受控状态下使用 onSearch 无法输入中文?

请使用 onChange 进行受控管理。onSearch 触发于搜索输入,与 onChange 时机不同。此外,点选选项时也不会触发 onSearch 事件。

相关 issue:#18230 #17916

v3 的部分属性为何在 v4 中没有了?

AutoComplete 组件是一个支持自动提示的 Input 组件,因而其不具有 labelInValue 等影响 value 展示的属性。在 v3 版本,AutoComplete 实现存在输入值如果遇到 valuelabel 相同时无法映射的问题。 v4 中不再支持 label 为值的输入形态。