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

46 lines
780 B
Markdown
Raw Normal View History

2016-03-31 09:40:55 +08:00
---
order: 1
title:
2016-07-10 08:55:43 +08:00
zh-CN: 带搜索框
en-US: Select with search field
2016-03-31 09:40:55 +08:00
---
2015-06-16 14:54:31 +08:00
2016-07-10 08:55:43 +08:00
## zh-CN
2016-04-27 18:07:48 +08:00
展开后可对选项进行搜索。
2015-06-16 14:54:31 +08:00
2016-07-10 08:55:43 +08:00
## en-US
2016-07-10 08:55:43 +08:00
Search the options while expanded.
2019-05-07 14:57:32 +08:00
```jsx
import { Select } from 'antd';
2018-06-27 15:55:04 +08:00
const { Option } = Select;
2015-06-16 14:54:31 +08:00
function onChange(value) {
console.log(`selected ${value}`);
2015-06-16 14:54:31 +08:00
}
function onSearch(val) {
console.log('search:', val);
}
export default () => (
<Select
showSearch
placeholder="Select a person"
optionFilterProp="children"
onChange={onChange}
onSearch={onSearch}
2019-05-07 14:57:32 +08:00
filterOption={(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
2019-05-07 14:57:32 +08:00
}
>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="tom">Tom</Option>
</Select>
2018-11-28 15:00:03 +08:00
);
2019-05-07 14:57:32 +08:00
```