ant-design/components/auto-complete/index.en-US.md

51 lines
2.5 KiB
Markdown
Raw Normal View History

2016-07-25 17:46:45 +08:00
---
category: Components
type: Data Entry
cols: 2
2016-09-08 16:53:50 +08:00
title: AutoComplete
2016-07-25 17:46:45 +08:00
---
Autocomplete function of input field.
2016-09-10 13:43:30 +08:00
## When To Use
2016-07-25 17:46:45 +08:00
2016-11-29 17:13:24 +08:00
When there is a need for autocomplete functionality.
2016-07-25 17:46:45 +08:00
## API
```jsx
const dataSource = ['12345', '23456', '34567'];
2019-05-07 14:57:32 +08:00
<AutoComplete dataSource={dataSource} />;
2016-07-25 17:46:45 +08:00
```
2017-10-25 10:25:44 +08:00
| Property | Description | Type | Default |
2019-05-07 14:57:32 +08:00
| --- | --- | --- | --- |
2017-10-25 10:25:44 +08:00
| allowClear | Show clear button, effective in multiple mode only. | boolean | false |
| autoFocus | get focus when component mounted | boolean | false |
2017-10-25 10:25:44 +08:00
| backfill | backfill selected item the input when using keyboard | boolean | false |
2017-01-20 18:28:09 +08:00
| children (for customize input element) | customize input element | HTMLInputElement / HTMLTextAreaElement / React.ReactElement<InputProps> | `<Input />` |
2019-05-07 14:57:32 +08:00
| children (for dataSource) | Data source for autocomplet | React.ReactElement<OptionProps> / Array&lt;React.ReactElement<OptionProps>> | - |
2017-10-25 10:25:44 +08:00
| dataSource | Data source for autocomplete | [DataSourceItemType](https://git.io/vMMKF)\[] | |
| defaultActiveFirstOption | Whether active first option by default | boolean | true |
2018-11-12 13:35:40 +08:00
| defaultValue | Initial selected option. | string\|string\[]\| - |
2017-10-25 10:25:44 +08:00
| 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` |
2017-10-25 10:25:44 +08:00
| placeholder | placeholder of input | string | - |
| value | selected option | string\|string\[]\|{ key: string, label: string\|ReactNode }\|Array&lt;{ key: string, label: string\|ReactNode }> | - |
2018-06-24 17:09:18 +08:00
| onBlur | Called when leaving the component. | function() | - |
| onChange | Called when select an option or input value change, or value of input is changed | function(value) | - |
2018-06-24 17:09:18 +08:00
| onFocus | Called when entering the component | function() | - |
2017-10-25 10:25:44 +08:00
| 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) | - |
| defaultOpen | Initial open state of dropdown | boolean | - |
| open | Controlled open state of dropdown | boolean | - |
| onDropdownVisibleChange | Call when dropdown open | function(open) | - |
## Methods
2019-05-07 14:57:32 +08:00
| Name | Description |
| ------- | ------------ |
| blur() | remove focus |
| focus() | get focus |