ant-design/components/select/demo/combobox.md

49 lines
1.0 KiB
Markdown
Raw Normal View History

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
import { Select } from 'antd';
const Option = Select.Option;
2015-06-16 19:59:07 +08:00
const Test = React.createClass({
2015-06-16 19:59:07 +08:00
getInitialState() {
return {
options: []
};
},
handleChange(value) {
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 {
options = ['gmail.com', '163.com', 'qq.com'].map(function(domain) {
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
});
}
2015-06-16 19:59:07 +08:00
this.setState({
options: options
});
},
render() {
2015-09-16 19:52:09 +08:00
// filterOption 需要设置为 false数据是动态设置的
2015-07-21 11:05:11 +08:00
return <Select combobox
style={{width:200}}
onChange={this.handleChange}
2015-09-16 19:52:09 +08:00
filterOption={false}
2015-07-21 11:05:11 +08:00
searchPlaceholder="请输入账户名">
2015-06-16 19:59:07 +08:00
{this.state.options}
</Select>;
}
});
2015-10-20 16:47:55 +08:00
ReactDOM.render(<Test />, document.getElementById('components-select-demo-combobox'));
2015-06-16 19:59:07 +08:00
````