2015-06-19 17:35:32 +08:00
|
|
|
# 智能提示
|
2015-06-16 19:59:07 +08:00
|
|
|
|
|
|
|
- order: 4
|
|
|
|
|
2015-07-23 11:13:20 +08:00
|
|
|
输入框自动完成功能,下面是一个账号注册表单的例子。
|
2015-06-16 19:59:07 +08:00
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
````jsx
|
|
|
|
var Select = antd.Select;
|
|
|
|
var Option = Select.Option;
|
|
|
|
|
|
|
|
var Test = React.createClass({
|
|
|
|
getInitialState() {
|
|
|
|
return {
|
|
|
|
options: []
|
|
|
|
};
|
|
|
|
},
|
|
|
|
handleChange(value) {
|
2015-06-18 12:02:38 +08:00
|
|
|
var options;
|
2015-07-23 11:13:20 +08:00
|
|
|
if (!value || value.indexOf('@') >= 0) {
|
2015-06-18 12:02:38 +08:00
|
|
|
options = [];
|
|
|
|
} else {
|
|
|
|
options = ['gmail.com', '163.com', 'qq.com'].map(function(domain) {
|
|
|
|
var 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
|
|
|
});
|
|
|
|
}
|
2015-06-16 19:59:07 +08:00
|
|
|
this.setState({
|
|
|
|
options: options
|
|
|
|
});
|
|
|
|
},
|
|
|
|
render() {
|
2015-07-21 11:05:11 +08:00
|
|
|
return <Select combobox
|
|
|
|
style={{width:200}}
|
|
|
|
onChange={this.handleChange}
|
|
|
|
searchPlaceholder="请输入账户名">
|
2015-06-16 19:59:07 +08:00
|
|
|
{this.state.options}
|
|
|
|
</Select>;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
React.render(<Test />, document.getElementById('components-select-demo-combobox'));
|
|
|
|
````
|
|
|
|
|