2016-07-25 17:46:45 +08:00
|
|
|
---
|
|
|
|
category: Components
|
2016-11-09 14:43:32 +08:00
|
|
|
type: Data Entry
|
2016-07-25 17:46:45 +08:00
|
|
|
cols: 1
|
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'];
|
|
|
|
<AutoComplete dataSource={dataSource} />
|
|
|
|
```
|
2016-11-29 17:13:24 +08:00
|
|
|
Since `AutoComplete` is based on `Select`, so besides the following API, `AutoComplete` has the same API as `Select`.
|
2016-07-25 17:46:45 +08:00
|
|
|
|
|
|
|
| Property | Description | Type | Default |
|
|
|
|
|----------------|----------------------------------|------------|--------|
|
|
|
|
| dataSource | Data source for autocomplete | Array | |
|
2016-09-01 18:12:12 +08:00
|
|
|
| value | selected option | String/Array<String>/{key: String, label: React.Node}/Array<{key, label}> | - |
|
2016-07-25 17:46:45 +08:00
|
|
|
| defaultValue | Initial selected option. | string/Array<String> | - |
|
|
|
|
| allowClear | Show clear button, effective in multiple mode only. | boolean | false |
|
2016-10-07 20:22:46 +08:00
|
|
|
| onChange | Called when select an option or input value change, or value of input is changed | function(value, label) | - |
|
2016-10-08 11:20:53 +08:00
|
|
|
| onSelect | Called when a option is selected. param is option's value and option instance. | function(value, option) | - |
|
2016-07-25 17:46:45 +08:00
|
|
|
| disabled | Whether disabled select | boolean | false |
|
2016-12-03 15:28:47 +08:00
|
|
|
| placeholder | placeholder of input | string | - |
|
2017-01-20 16:16:31 +08:00
|
|
|
| optionLabelProp | Which prop value of option will render as content of select. | string | `children` |
|