mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-27 10:34:26 +08:00
59 lines
1.3 KiB
Markdown
59 lines
1.3 KiB
Markdown
---
|
||
order: 4
|
||
title:
|
||
zh-CN: 智能提示
|
||
en-US: Automatic completion
|
||
---
|
||
|
||
## zh-CN
|
||
|
||
输入框自动完成功能，下面是一个账号注册表单的例子。
|
||
|
||
推荐使用 [AutoComplete](/components/auto-complete/) 组件。
|
||
|
||
## en-US
|
||
|
||
Automatic completion of select input.
|
||
|
||
Using the [AutoComplete](/components/auto-complete/) component is strongly recommended instead as it is more flexible and capable.
|
||
|
||
|
||
````jsx
|
||
import { Select } from 'antd';
|
||
const Option = Select.Option;
|
||
|
||
class App extends React.Component {
|
||
state = {
|
||
options: [],
|
||
}
|
||
handleChange = (value) => {
|
||
let options;
|
||
if (!value || value.indexOf('@') >= 0) {
|
||
options = [];
|
||
} else {
|
||
options = ['gmail.com', '163.com', 'qq.com'].map((domain) => {
|
||
const email = `${value}@${domain}`;
|
||
return <Option key={email}>{email}</Option>;
|
||
});
|
||
}
|
||
this.setState({ options });
|
||
}
|
||
render() {
|
||
// filterOption needs to be false，as the value is dynamically generated
|
||
return (
|
||
<Select
|
||
mode="combobox"
|
||
style={{ width: 200 }}
|
||
onChange={this.handleChange}
|
||
filterOption={false}
|
||
placeholder="Enter the account name"
|
||
>
|
||
{this.state.options}
|
||
</Select>
|
||
);
|
||
}
|
||
}
|
||
|
||
ReactDOM.render(<App />, mountNode);
|
||
````
|