ant-design/components/auto-complete/index.zh-CN.md

---
category: Components
subtitle: 自动完成
type: Data Entry
cols: 2
title: AutoComplete
---

输入框自动完成功能。

## 何时使用

需要自动完成时。

## API

```jsx
const dataSource = ['12345', '23456', '34567'];
<AutoComplete dataSource={dataSource} />
```

| 参数           | 说明                             | 类型        | 默认值 |
|----------------|----------------------------------|------------|---------|
| dataSource          | 自动完成的数据源 | [DataSourceItemType](https://git.io/vMMKF)[]     |         |
| value    | 指定当前选中的条目 | string\|string[]\|{ key: string, label: string\|ReactNode }\|Array<{ key: string, label: string\|ReactNode }>   |  无  |
| defaultValue | 指定默认选中的条目 | string\|string[]\|{ key: string, label: string\|ReactNode }\|Array<{ key: string, label: string\|ReactNode}>   |  无  |
| allowClear   | 支持清除, 单选模式有效 | boolean | false |
| onChange | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) | 无 |
| onSelect | 被选中时调用，参数为选中项的 value 值	| function(value, option)	| 无 |
| disabled | 是否禁用 | boolean | false |
| placeholder | 输入框提示 | string | - |
| children (自动完成的数据源) | 自动完成的数据源 | React.ReactElement<OptionProps> / Array<React.ReactElement<OptionProps>> | - |
| children (自定义输入框) | 自定义输入框 |  HTMLInputElement / HTMLTextAreaElement / React.ReactElement<InputProps> | `<Input />` |
| optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` |
| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true     |
-												feat: AutoComplete (#2490)


											
										
										
											2016-07-25 17:46:45 +08:00
+								---
 								category: Components
-												docs: update docs details

											
										
										
											2016-09-21 11:28:38 +08:00
+								subtitle: 自动完成
-												docs: 调整组件导航结构 (#3758)

- Layout 更名为 Grid
											
										
										
											2016-11-09 14:43:32 +08:00
+								type: Data Entry
-												 docs: AutoComplete document and demo improvement (#4840)

*  AutoComplete document and demo improvement

 + add a non-case-sensitive demo, close #4834.
 + remove confusing descriptions from document, close #4805.

* add snapshot

											
										
										
											2017-02-13 15:45:49 +08:00
+								cols: 2
-												docs: update docs details

											
										
										
											2016-09-21 11:28:38 +08:00
+								title: AutoComplete
-												feat: AutoComplete (#2490)


											
										
										
											2016-07-25 17:46:45 +08:00
+								---
 								输入框自动完成功能。
 								## 何时使用
 								需要自动完成时。
 								## API
 								```jsx
 								const dataSource = ['12345', '23456', '34567'];
 								<AutoComplete dataSource={dataSource} />
 								```
 								| 参数           | 说明                             | 类型        | 默认值 |
 								|----------------|----------------------------------|------------|---------|
-												docs: Unify type naming (#4636)

* Unify name of ReactNode type in document

* Lowser all string type name

* Lowercase all number type name

* Lowercase all boolean type name

* Unify array type

* Lowercase all object type name

* Unify mutilple types

											
										
										
											2017-01-20 20:10:50 +08:00
+								| dataSource          | 自动完成的数据源 | [DataSourceItemType](https://git.io/vMMKF)[]     |         |
 								| value    | 指定当前选中的条目 | string\|string[]\|{ key: string, label: string\|ReactNode }\|Array<{ key: string, label: string\|ReactNode }>   |  无  |
 								| defaultValue | 指定默认选中的条目 | string\|string[]\|{ key: string, label: string\|ReactNode }\|Array<{ key: string, label: string\|ReactNode}>   |  无  |
-												feat: AutoComplete (#2490)


											
										
										
											2016-07-25 17:46:45 +08:00
+								| allowClear   | 支持清除, 单选模式有效 | boolean | false |
-												docs: update docs for AutoComplete, ref: #3295

											
										
										
											2016-10-07 20:22:46 +08:00
+								| onChange | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) | 无 |
-												feat: Exposing `onSelect` API of AutoComplete Component (#3320)


											
										
										
											2016-10-08 11:20:53 +08:00
+								| onSelect | 被选中时调用，参数为选中项的 value 值	| function(value, option)	| 无 |
-												docs: update docs details

											
										
										
											2016-09-21 11:28:38 +08:00
+								| disabled | 是否禁用 | boolean | false |
-												Add doc and demo for AutoComplete[placeholder], close #4044

											
										
										
											2016-12-03 15:28:47 +08:00
+								| placeholder | 输入框提示 | string | - |
-												Customize Input Component of AutoComplete (#4483)

* cherry-pick

* remove useless files

* remove useless files

* Group ts

* update interface

* ReactElement

											
										
										
											2017-01-13 21:19:23 +08:00
+								| children (自动完成的数据源) | 自动完成的数据源 | React.ReactElement<OptionProps> / Array<React.ReactElement<OptionProps>> | - |
-												Merge from master

											
										
										
											2017-01-20 18:28:09 +08:00
+								| children (自定义输入框) | 自定义输入框 |  HTMLInputElement / HTMLTextAreaElement / React.ReactElement<InputProps> | `<Input />` |
-												 docs: Autocomplete optionLabelProp document (#4663)

close #4656
											
										
										
											2017-01-20 16:16:31 +08:00
+								| optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` |
-												 docs: AutoComplete document and demo improvement (#4840)

*  AutoComplete document and demo improvement

 + add a non-case-sensitive demo, close #4834.
 + remove confusing descriptions from document, close #4805.

* add snapshot

											
										
										
											2017-02-13 15:45:49 +08:00
+								| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true     |