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

47 lines
991 B
Markdown
Raw Normal View History

2016-03-31 09:40:55 +08:00
---
order: 4
title: 智能提示
---
2015-06-16 19:59:07 +08:00
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 {
2016-04-27 18:07:48 +08:00
options: [],
2015-06-16 19:59:07 +08:00
};
},
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((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
});
}
this.setState({ options });
2015-06-16 19:59:07 +08:00
},
render() {
2015-11-19 17:12:16 +08:00
// filterOption 需要设置为 false数据是动态设置的
return (
<Select combobox
style={{ width: 200 }}
onChange={this.handleChange}
filterOption={false}
placeholder="请输入账户名"
>
{this.state.options}
</Select>
);
2016-05-11 09:32:33 +08:00
},
2015-06-16 19:59:07 +08:00
});
ReactDOM.render(<Test />, mountNode);
2015-06-16 19:59:07 +08:00
````