--- order: 4 title: zh-CN: 查询模式 - 确定类目 en-US: Lookup-Patterns - Certain Category --- ## zh-CN [查询模式: 确定类目](https://ant.design/docs/spec/reaction#Lookup-Patterns) 示例。 ## en-US Demonstration of [Lookup Patterns: Certain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns). Basic Usage, set options of autocomplete with `options` property. ```tsx import { Input, AutoComplete } from 'antd'; import { SearchOutlined, UserOutlined } from '@ant-design/icons'; const { Option, OptGroup } = AutoComplete; function renderTitle(title: string) { return ( {title} more ); } function renderItem(title: string, count: number) { return { value: title, label: ( <> {title} {count} ), }; } 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)], }, ]; function Complete() { return (
} placeholder="input here" />
); } ReactDOM.render(, mountNode); ``` ```css .certain-category-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix { right: 12px; } .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 { border-bottom: 1px solid #f6f6f6; } .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; } .certain-search-item-count { position: absolute; color: #999; right: 16px; } .certain-category-search.ant-select-focused .certain-category-icon { color: #108ee9; } .certain-category-icon { color: #6e6e6e; transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); font-size: 16px; } ```