ant-design/components/select/demo/combobox.md
2015-07-21 11:05:11 +08:00

874 B

智能提示

  • order: 4

类似账号注册表单输入框的自动完成功能。


var Select = antd.Select;
var Option = Select.Option;

var Test = React.createClass({
  getInitialState() {
    return {
      options: []
    };
  },
  handleChange(value) {
    var options;
    if (!value) {
      options = [];
    } else {
      options = ['gmail.com', '163.com', 'qq.com'].map(function(domain) {
        var email = value + '@' + domain;
        return <Option key={email}>{email}</Option>;
      });
    }
    this.setState({
      options: options
    });
  },
  render() {
    return <Select combobox
      style={{width:200}}
      onChange={this.handleChange}
      searchPlaceholder="请输入账户名">
      {this.state.options}
    </Select>;
  }
});

React.render(<Test />, document.getElementById('components-select-demo-combobox'));