AutoComplete 自动完成
为输入框提供自动完成功能。
获取组件
import { AutoComplete } from 'rsuite';演示
默认
自动补全
自定义选项
禁用
InputGroup 组合
受控
Props
<AutoComplete>
| 属性名称 | 类型(默认值) |
描述 |
|---|---|---|
| classPrefix | string ('auto-complete') |
组件 CSS 类的前缀 |
| data * | string[], Array<DataItemType> | 组件数据 |
| defaultValue | string | 设置默认值 非受控 |
| disabled | boolean | 禁用组件 |
| filterBy | (value: string, item: DataItemType) => boolean | 自定义每个item是否显示(默认只会显示data中value是它的子字符串的项) |
| menuClassName | string | 选项菜单的 className |
| onChange | (value:string, event) => void | value 发生改变时的回调函数 |
| onClose | () => void | 隐藏时的回调函数 |
| onEnter | () => void | 显示前动画过渡的回调函数 |
| onEntered | () => void | 显示后动画过渡的回调函数 |
| onEntering | () => void | 显示中动画过渡的回调函数 |
| onExit | () => void | 退出前动画过渡的回调函数 |
| onExited | () => void | 退出后动画过渡的回调函数 |
| onExiting | () => void | 退出中动画过渡的回调函数 |
| onSelect | (item:DataItemType, event) => void | 选项被点击选择后的回调函数 |
| placeholder | React.Node | 占位符 |
| renderItem | (label:React.Node, item: DataItemType) => React.Node | 自定义被选中的选项 |
| selectOnEnter | boolean (true) |
当设为 false 时,回车键不能作选值操作 |
| value | string | 设置值 受控 |