diff --git a/components/auto-complete/__tests__/ac.test.js b/components/auto-complete/__tests__/ac.test.js
new file mode 100644
index 0000000000..fb7da2e8f6
--- /dev/null
+++ b/components/auto-complete/__tests__/ac.test.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import AutoComplete from '..';
+
+describe('AutoComplete with Custom Input Element Render', () => {
+ it('AutoComplete with custom Input render perfectly', () => {
+ const wrapper = mount(
+
+
+
+ );
+
+ expect(wrapper.find('textarea').length).toBe(1);
+ wrapper.find('textarea').simulate('change', { target: { value: '123' } });
+ const dropdownWrapper = mount(wrapper.find('Trigger').node.getComponent());
+
+ expect(dropdownWrapper.find('MenuItem').length).toBe(1);
+ expect(dropdownWrapper.find('MenuItem').props().value).toBe('12345');
+ });
+});
diff --git a/components/auto-complete/demo/antd.md b/components/auto-complete/demo/antd.md
new file mode 100644
index 0000000000..b4b18ccbce
--- /dev/null
+++ b/components/auto-complete/demo/antd.md
@@ -0,0 +1,58 @@
+---
+order: 3
+title:
+ zh-CN: 自定义输入组件
+ en-US: Customize Input Component
+---
+
+## zh-CN
+
+自定义输入组件。
+
+## en-US
+
+Customize Input Component
+
+````jsx
+import { AutoComplete } from 'antd';
+
+function onSelect(value) {
+ console.log('onSelect', value);
+}
+
+const Complete = React.createClass({
+ getInitialState() {
+ return {
+ dataSource: [],
+ };
+ },
+ handleChange(value) {
+ this.setState({
+ dataSource: !value ? [] : [
+ value,
+ value + value,
+ value + value + value,
+ ],
+ });
+ },
+ handleKeyPress(ev) {
+ console.log('handleKeyPress', ev);
+ },
+ render() {
+ const { dataSource } = this.state;
+ return (
+
+
+
+ );
+ },
+});
+
+ReactDOM.render(
, mountNode);
+````
diff --git a/components/auto-complete/index.en-US.md b/components/auto-complete/index.en-US.md
index eca1bb8b6a..4bceb72ade 100644
--- a/components/auto-complete/index.en-US.md
+++ b/components/auto-complete/index.en-US.md
@@ -29,3 +29,5 @@ Since `AutoComplete` is based on `Select`, so besides the following API, `AutoCo
| onSelect | Called when a option is selected. param is option's value and option instance. | function(value, option) | - |
| disabled | Whether disabled select | boolean | false |
| placeholder | placeholder of input | string | - |
+| children (for dataSource) | Data source for autocomplet | React.ReactElement
/ Array> | - |
+| children (for customize input element) | customize input element | HTMLInputElement / HTMLTextAreaElement / React.ReactElement | `` |
\ No newline at end of file
diff --git a/components/auto-complete/index.tsx b/components/auto-complete/index.tsx
index 6600a32503..6eda988db2 100755
--- a/components/auto-complete/index.tsx
+++ b/components/auto-complete/index.tsx
@@ -1,5 +1,7 @@
import React from 'react';
+import { findDOMNode } from 'react-dom';
import Select, { OptionProps, OptGroupProps } from '../select';
+import Input from '../input';
import { Option, OptGroup } from 'rc-select';
import classNames from 'classnames';
@@ -11,6 +13,16 @@ export interface SelectedValue {
export interface DataSourceItemObject { value: string; text: string; };
export type DataSourceItemType = string | DataSourceItemObject;
+export interface InputProps {
+ onChange?: React.FormEventHandler;
+ value: any;
+}
+
+export type ValidInputElement =
+ HTMLInputElement |
+ HTMLTextAreaElement |
+ React.ReactElement;
+
export interface AutoCompleteProps {
size?: 'large' | 'small' | 'default';
className?: string;
@@ -26,6 +38,25 @@ export interface AutoCompleteProps {
allowClear?: boolean;
onChange?: (value: string | Array | SelectedValue | Array) => void;
disabled?: boolean;
+ children: ValidInputElement |
+ React.ReactElement |
+ Array>;
+}
+
+class InputElement extends React.Component {
+ private ele: Element;
+ focus = () => {
+ (findDOMNode(this.ele) as HTMLInputElement).focus();
+ }
+ blur = () => {
+ (findDOMNode(this.ele) as HTMLInputElement).blur();
+ }
+ render() {
+ return React.cloneElement(this.props.children, {
+ ...this.props,
+ ref: ele => this.ele = ele,
+ }, null);
+ }
}
export default class AutoComplete extends React.Component {
@@ -44,6 +75,13 @@ export default class AutoComplete extends React.Component {
+ const { children } = this.props;
+ const element = children && React.isValidElement(children) && children.type !== Option ?
+ React.Children.only(this.props.children) :
+ ;
+ return {element};
+ }
render() {
let {
size, className = '', notFoundContent, prefixCls, optionLabelProp, dataSource, children,
@@ -54,22 +92,32 @@ export default class AutoComplete extends React.Component {
- switch (typeof item) {
- case 'string':
- return ;
- case 'object':
- return (
-
- );
- default:
- throw new Error('AutoComplete[dataSource] only supports type `string[] | Object[]`.');
- }
- }) : []);
+ let options;
+ const childArray = React.Children.toArray(children);
+ if (childArray.length && (childArray[0] as React.ReactElement).type === Option) {
+ options = childArray;
+ } else {
+ options = dataSource ? dataSource.map((item) => {
+ if (React.isValidElement(item)) {
+ return item;
+ }
+ switch (typeof item) {
+ case 'string':
+ return ;
+ case 'object':
+ return (
+
+ );
+ default:
+ throw new Error('AutoComplete[dataSource] only supports type `string[] | Object[]`.');
+ }
+ }) : [];
+ }
return (