ant-design/components/auto-complete/demo/options.md
二货机器人 2ea28af6ed
Virtual select component (#18658)
* init

* fix firefox

* add active style

* adjust arrow style

* update select

* update icon logic

* render empty

* init multiple

* fix ff display style

* sync font size

* adjust padding style

* add padding

* padding it

* hotfix of chrome

* single sm

* multiple size

* update option group style

* update snapshot

* clean up transition

* rm combobox in ts define

* auto complete init

* fix auto option def

* update demo

* update demo

* update uncertain demo

* update demo

* warning if user set `size` on AutoComplete

* add debug demo

* updat demo

* update demo of disabled

* update snapshot

* rm useless test

* fix pagination test

* fix Table test

* fix calendar test case

* fix calendar test case

* adjust style

* add big data demo

* support clean up

* fix ts define

* fix lint

* fix demo lint

* fix style lint fix

* rm useless deps

* update snapshot

* stop mock

* add space
2019-09-12 20:15:17 +08:00

1.0 KiB

order title
2
zh-CN en-US
自定义选项 Customized

zh-CN

也可以直接传 AutoComplete.Option 作为 AutoCompletechildren,而非使用 options

en-US

You could pass AutoComplete.Option as children of AutoComplete, instead of using options

import { AutoComplete } from 'antd';

const { Option } = AutoComplete;

class Complete extends React.Component {
  state = {
    result: [],
  };

  handleSearch = value => {
    let result;
    if (!value || value.indexOf('@') >= 0) {
      result = [];
    } else {
      result = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
    }
    this.setState({ result });
  };

  render() {
    const { result } = this.state;
    const children = result.map(email => <Option key={email}>{email}</Option>);
    return (
      <AutoComplete style={{ width: 200 }} onSearch={this.handleSearch} placeholder="input here">
        {children}
      </AutoComplete>
    );
  }
}

ReactDOM.render(<Complete />, mountNode);