feat: AutoComplete (#2490)

components/auto-complete/demo/basic.md

@@ -0,0 +1,45 @@
+---
+order: 0
+title: 
+  zh-CN: 基本使用
+  en-US: Basic Usage
+---
+
+## zh-CN
+
+基本使用。通过 dataSource 设置自动完成的数据源
+
+## en-US
+
+Basic Usage, set datasource of autocomplete with `dataSource` property.
+
+````jsx
+import { AutoComplete } from 'antd';
+
+const Complete = React.createClass({
+  getInitialState() {
+    return {
+      dataSource: [],
+    };
+  },
+  handleChange(value) {
+    this.setState({
+      dataSource: [
+        value,
+        value + value,
+        value + value + value,
+      ],
+    });
+  },
+  render() {
+    const { dataSource } = this.state;
+    return (<AutoComplete
+      dataSource={dataSource}
+      style={{ width: 200 }}
+      onChange={this.handleChange}
+    />);
+  },
+});
+
+ReactDOM.render(<Complete />, mountNode);
+````

components/auto-complete/demo/options.md

@@ -0,0 +1,50 @@
+---
+order: 2
+title: 
+  zh-CN: 自定义选项
+  en-US: Customized
+---
+
+## zh-CN
+
+Datasource 的每一项是一个 `AutoComplete.Option`。通过 `AutoComplete.Option` 自定义下拉菜单。
+
+## en-US
+
+Each datasource is an `AutoComplete.Option`.
+ 
+
+````jsx
+import { AutoComplete } from 'antd';
+const Option = AutoComplete.Option;
+
+const Complete = React.createClass({
+  getInitialState() {
+    return {
+      dataSource: [],
+    };
+  },
+  handleChange(value) {
+    let dataSource;
+    if (!value || value.indexOf('@') >= 0) {
+      dataSource = [];
+    } else {
+      dataSource = ['gmail.com', '163.com', 'qq.com'].map((domain) => {
+        const email = `${value}@${domain}`;
+        return <Option key={email}>{email}</Option>;
+      });
+    }
+    this.setState({ dataSource });
+  },
+  render() {
+    const { dataSource } = this.state;
+    return (<AutoComplete
+      style={{ width: 200 }}
+      dataSource={dataSource}
+      onChange={this.handleChange}
+    />);
+  },
+});
+
+ReactDOM.render(<Complete />, mountNode);
+````

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

@@ -0,0 +1,30 @@
+---
+category: Components
+chinese: 自动完成
+type: Form Controls
+cols: 1
+english: AutoComplete
+---
+
+Autocomplete function of input field.
+
+## When to use
+
+When need to use autocomplete function.
+
+## API
+
+```jsx
+const dataSource = ['12345', '23456', '34567'];
+<AutoComplete dataSource={dataSource} />
+```
+
+
+| Property           | Description                             |  Type | Default |
+|----------------|----------------------------------|------------|--------|
+| dataSource          | Data source for autocomplete | Array     |      |
+| value    | selcted option | String/Array<String>/{key: String, label: React.Node}/Array<{key, label}>   |  -  |
+| defaultValue | Initial selected option. | string/Array<String>   |  -  |
+| allowClear   | Show clear button, effective in multiple mode only. | boolean | false |
+| onChange | Called when select an option or input value change, or value of input is changed in combobox mode | function(value, label) | - |
+| disabled | Whether disabled select | boolean | false |

components/auto-complete/index.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import Select, { Option, OptGroup } from '../select';
+import classNames from 'classnames';
+
+export interface AutoCompleteProps {
+  size?: string;
+  className?: string;
+  notFoundContent?: Element;
+  dataSource: Array<any>;
+  prefixCls?: string;
+  transitionName?: string;
+  optionLabelProp?: string;
+  choiceTransitionName?: string;
+  showSearch?: boolean;
+}
+
+export default class AutoComplete extends React.Component<AutoCompleteProps, any> {
+  static Option = Option;
+  static OptGroup = OptGroup;
+
+  static defaultProps = {
+    prefixCls: 'ant-select',
+    transitionName: 'slide-up',
+    optionLabelProp: 'children',
+    choiceTransitionName: 'zoom',
+    showSearch: false,
+  };
+
+  static contextTypes = {
+    antLocale: React.PropTypes.object,
+  };
+
+  render() {
+    let {
+      size, className, notFoundContent, prefixCls, optionLabelProp, dataSource,
+    } = this.props;
+
+    const cls = classNames({
+      [`${prefixCls}-lg`]: size === 'large',
+      [`${prefixCls}-sm`]: size === 'small',
+      [className]: !!className,
+      [`${prefixCls}-show-search`]: true,
+    });
+
+    const options = dataSource ? dataSource.map((item, index) => {
+      switch (typeof item) {
+        case 'string':
+          return <Option key={item}>{item}</Option>;
+        case 'object':
+          if (React.isValidElement(item)) {
+            return React.cloneElement(item, {
+              key: item.key || index,
+            });
+          }
+          return <Option key={item.value}>{item.text}</Option>;
+        default:
+          return [];
+      }
+    }) : [];
+
+    return (
+      <Select {...this.props}
+        className={cls}
+        optionLabelProp={optionLabelProp}
+        combobox
+        notFoundContent={notFoundContent} >
+        {options}
+      </Select>
+    );
+  }
+}

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

@@ -0,0 +1,30 @@
+---
+category: Components
+chinese: 自动完成
+type: Form Controls
+cols: 1
+english: AutoComplete
+---
+
+输入框自动完成功能。
+
+## 何时使用
+
+需要自动完成时。
+
+## API
+
+```jsx
+const dataSource = ['12345', '23456', '34567'];
+<AutoComplete dataSource={dataSource} />
+```
+
+
+| 参数           | 说明                             | 类型        | 默认值 |
+|----------------|----------------------------------|------------|---------|
+| dataSource          | 自动完成的数据源 | Array     |         | 
+| value    | 指定当前选中的条目 | String/Array<String>/{key: String, label: React.Node}/Array<{key, label}>   |  无  |
+| defaultValue | 指定默认选中的条目 | String/Array<String>/{key: String, label: React.Node}/Array<{key, label}>   |  无  |
+| allowClear   | 支持清除, 单选模式有效 | boolean | false |
+| onChange | 选中 option，或 input 的 value 变化（combobox 模式下）时，调用此函数 | function(value) | 无 |
+| disabled | 是否禁用 | boolean | false |

components/auto-complete/style/index.less

@@ -0,0 +1,2 @@
+@import "../../style/themes/default";
+@import "../../select/style/index";

components/index.tsx

@@ -1,6 +1,9 @@
 import Affix from './affix';
 export { Affix };
 
+import AutoComplete from './auto-complete';
+export { AutoComplete };
+
 import Alert from './alert';
 export { Alert };
 

components/select/demo/combobox.md

@@ -9,10 +9,15 @@ title:
 
 输入框自动完成功能，下面是一个账号注册表单的例子。
 
+推荐使用 [AutoComplete](/components/auto-complete) 组件。
+
 ## en-US
 
 Automatic completion of select input. 
 
+Using the [AutoComplete](/components/auto-complete) component is strongly recommended instead as it is more flexible and capable.
+
+
 ````jsx
 import { Select } from 'antd';
 const Option = Select.Option;