2017-03-03 22:10:21 +08:00
---
order: 4
title:
zh-CN: 查询模式 - 确定类目
en-US: Lookup-Patterns - Certain Category
---
## zh-CN
[查询模式: 确定类目 ](https://ant.design/docs/spec/reaction#Lookup-Patterns ) 示例。
## en-US
2019-09-12 20:15:17 +08:00
Demonstration of [Lookup Patterns: Certain Category ](https://ant.design/docs/spec/reaction#Lookup-Patterns ). Basic Usage, set options of autocomplete with `options` property.
2017-03-03 22:10:21 +08:00
2019-09-12 20:15:17 +08:00
```tsx
2020-01-17 11:39:31 +08:00
import { UserOutlined } from '@ant-design/icons';
2022-05-23 14:37:16 +08:00
import { AutoComplete, Input } from 'antd';
import React from 'react';
2018-06-27 15:55:04 +08:00
2021-02-23 10:45:11 +08:00
const renderTitle = (title: string) => (
< span >
{title}
< a
style={{ float: 'right' }}
href="https://www.google.com/search?q=antd"
target="_blank"
rel="noopener noreferrer"
>
more
< / a >
< / span >
);
const renderItem = (title: string, count: number) => ({
value: title,
label: (
< div
style={{
display: 'flex',
justifyContent: 'space-between',
}}
>
2017-03-06 17:56:34 +08:00
{title}
2021-02-23 10:45:11 +08:00
< span >
< UserOutlined / > {count}
< / span >
< / div >
),
});
2019-09-12 20:15:17 +08:00
const options = [
{
label: renderTitle('Libraries'),
options: [renderItem('AntDesign', 10000), renderItem('AntDesign UI', 10600)],
},
{
label: renderTitle('Solutions'),
options: [renderItem('AntDesign UI FAQ', 60100), renderItem('AntDesign FAQ', 30010)],
},
{
label: renderTitle('Articles'),
options: [renderItem('AntDesign design language', 100000)],
},
];
2017-03-03 22:10:21 +08:00
2022-05-19 09:46:26 +08:00
const App: React.FC = () => (
2020-05-09 19:32:02 +08:00
< AutoComplete
dropdownClassName="certain-category-search-dropdown"
dropdownMatchSelectWidth={500}
style={{ width: 250 }}
options={options}
>
< Input.Search size = "large" placeholder = "input here" / >
< / AutoComplete >
);
2017-03-03 22:10:21 +08:00
2022-05-19 09:46:26 +08:00
export default App;
2019-05-07 14:57:32 +08:00
```
2017-03-03 22:10:21 +08:00
2019-05-07 14:57:32 +08:00
```css
2017-03-03 22:10:21 +08:00
.certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {
color: #666 ;
font-weight: bold;
}
.certain-category-search-dropdown .ant-select-dropdown-menu-item-group {
2019-05-07 14:57:32 +08:00
border-bottom: 1px solid #f6f6f6 ;
2017-03-03 22:10:21 +08:00
}
.certain-category-search-dropdown .ant-select-dropdown-menu-item {
padding-left: 16px;
}
.certain-category-search-dropdown .ant-select-dropdown-menu-item.show-all {
text-align: center;
cursor: default;
}
.certain-category-search-dropdown .ant-select-dropdown-menu {
max-height: 300px;
}
2019-05-07 14:57:32 +08:00
```