mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-21 04:48:02 +08:00
2.2 KiB
2.2 KiB
category | type | cols | title |
---|---|---|---|
Components | Data Entry | 2 | AutoComplete |
Autocomplete function of input field.
When To Use
When there is a need for autocomplete functionality.
API
const dataSource = ['12345', '23456', '34567'];
<AutoComplete dataSource={dataSource} />
Property | Description | Type | Default |
---|---|---|---|
allowClear | Show clear button, effective in multiple mode only. | boolean | false |
backfill | backfill selected item the input when using keyboard | boolean | false |
children (for customize input element) | customize input element | HTMLInputElement / HTMLTextAreaElement / React.ReactElement | <Input /> |
children (for dataSource) | Data source for autocomplet | React.ReactElement / Array<React.ReactElement> | - |
dataSource | Data source for autocomplete | DataSourceItemType[] | |
defaultActiveFirstOption | Whether active first option by default | boolean | true |
defaultValue | Initial selected option. | string|string[]|{ key: string, label: string|ReactNode }|Array<{ key: string, label: string|ReactNode }> | - |
disabled | Whether disabled select | boolean | false |
filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, inputValue and option , if the function returns true , the option will be included in the filtered set; Otherwise, it will be excluded. |
boolean or function(inputValue, option) | true |
optionLabelProp | Which prop value of option will render as content of select. | string | children |
placeholder | placeholder of input | string | - |
value | selected option | string|string[]|{ key: string, label: string|ReactNode }|Array<{ key: string, label: string|ReactNode }> | - |
onChange | Called when select an option or input value change, or value of input is changed | function(value, label) | - |
onSearch | Called when searching items. | function(value) | - |
onSelect | Called when a option is selected. param is option's value and option instance. | function(value, option) | - |