2016-03-31 09:40:55 +08:00
|
|
|
|
---
|
|
|
|
|
order: 4
|
2016-09-30 10:34:11 +08:00
|
|
|
|
title:
|
2016-07-10 08:55:43 +08:00
|
|
|
|
zh-CN: 智能提示
|
|
|
|
|
en-US: Automatic completion
|
2016-03-31 09:40:55 +08:00
|
|
|
|
---
|
2015-06-16 19:59:07 +08:00
|
|
|
|
|
2016-07-10 08:55:43 +08:00
|
|
|
|
## zh-CN
|
|
|
|
|
|
2015-07-23 11:13:20 +08:00
|
|
|
|
输入框自动完成功能,下面是一个账号注册表单的例子。
|
2015-06-16 19:59:07 +08:00
|
|
|
|
|
2016-09-30 10:34:11 +08:00
|
|
|
|
推荐使用 [AutoComplete](/components/auto-complete/) 组件。
|
2016-07-25 17:46:45 +08:00
|
|
|
|
|
2016-07-10 08:55:43 +08:00
|
|
|
|
## en-US
|
|
|
|
|
|
2016-09-30 10:34:11 +08:00
|
|
|
|
Automatic completion of select input.
|
2016-07-10 08:55:43 +08:00
|
|
|
|
|
2016-09-30 10:34:11 +08:00
|
|
|
|
Using the [AutoComplete](/components/auto-complete/) component is strongly recommended instead as it is more flexible and capable.
|
2016-07-25 17:46:45 +08:00
|
|
|
|
|
|
|
|
|
|
2015-06-16 19:59:07 +08:00
|
|
|
|
````jsx
|
2015-10-28 20:55:49 +08:00
|
|
|
|
import { Select } from 'antd';
|
|
|
|
|
const Option = Select.Option;
|
2015-06-16 19:59:07 +08:00
|
|
|
|
|
2015-10-28 20:55:49 +08:00
|
|
|
|
const Test = React.createClass({
|
2015-06-16 19:59:07 +08:00
|
|
|
|
getInitialState() {
|
|
|
|
|
return {
|
2016-04-27 18:07:48 +08:00
|
|
|
|
options: [],
|
2015-06-16 19:59:07 +08:00
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
handleChange(value) {
|
2015-10-28 20:55:49 +08:00
|
|
|
|
let options;
|
2015-07-23 11:13:20 +08:00
|
|
|
|
if (!value || value.indexOf('@') >= 0) {
|
2015-06-18 12:02:38 +08:00
|
|
|
|
options = [];
|
|
|
|
|
} else {
|
2016-01-23 15:22:16 +08:00
|
|
|
|
options = ['gmail.com', '163.com', 'qq.com'].map((domain) => {
|
2016-02-17 18:04:42 +08:00
|
|
|
|
const email = `${value}@${domain}`;
|
2015-07-08 22:07:15 +08:00
|
|
|
|
return <Option key={email}>{email}</Option>;
|
2015-06-18 11:57:31 +08:00
|
|
|
|
});
|
|
|
|
|
}
|
2016-01-23 15:22:16 +08:00
|
|
|
|
this.setState({ options });
|
2015-06-16 19:59:07 +08:00
|
|
|
|
},
|
|
|
|
|
render() {
|
2016-09-12 10:10:07 +08:00
|
|
|
|
// filterOption needs to be false,as the value is dynamically generated
|
2016-01-07 16:29:12 +08:00
|
|
|
|
return (
|
|
|
|
|
<Select combobox
|
2016-01-27 16:44:50 +08:00
|
|
|
|
style={{ width: 200 }}
|
2016-01-08 14:41:05 +08:00
|
|
|
|
onChange={this.handleChange}
|
|
|
|
|
filterOption={false}
|
2016-09-12 10:10:07 +08:00
|
|
|
|
placeholder="Enter the account name"
|
2016-06-06 13:54:10 +08:00
|
|
|
|
>
|
2016-01-07 16:29:12 +08:00
|
|
|
|
{this.state.options}
|
|
|
|
|
</Select>
|
|
|
|
|
);
|
2016-05-11 09:32:33 +08:00
|
|
|
|
},
|
2015-06-16 19:59:07 +08:00
|
|
|
|
});
|
|
|
|
|
|
2015-12-29 12:08:58 +08:00
|
|
|
|
ReactDOM.render(<Test />, mountNode);
|
2015-06-16 19:59:07 +08:00
|
|
|
|
````
|