mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-08 07:00:29 +08:00
2ea28af6ed
* 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
58 lines
951 B
Markdown
58 lines
951 B
Markdown
---
|
|
order: 1
|
|
title:
|
|
zh-CN: 带搜索框
|
|
en-US: Select with search field
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
展开后可对选项进行搜索。
|
|
|
|
## en-US
|
|
|
|
Search the options while expanded.
|
|
|
|
```jsx
|
|
import { Select } from 'antd';
|
|
|
|
const { Option } = Select;
|
|
|
|
function onChange(value) {
|
|
console.log(`selected ${value}`);
|
|
}
|
|
|
|
function onBlur() {
|
|
console.log('blur');
|
|
}
|
|
|
|
function onFocus() {
|
|
console.log('focus');
|
|
}
|
|
|
|
function onSearch(val) {
|
|
console.log('search:', val);
|
|
}
|
|
|
|
ReactDOM.render(
|
|
<Select
|
|
showSearch
|
|
style={{ width: 200 }}
|
|
placeholder="Select a person"
|
|
optionFilterProp="children"
|
|
onChange={onChange}
|
|
onFocus={onFocus}
|
|
onBlur={onBlur}
|
|
onSearch={onSearch}
|
|
filterOption={(input, option) =>
|
|
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
}
|
|
>
|
|
<Option value="jack">Jack</Option>
|
|
<Option value="lucy">Lucy</Option>
|
|
<Option value="tom">Tom</Option>
|
|
</Select>,
|
|
mountNode,
|
|
);
|
|
```
|