--- 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 datasource of autocomplete with `dataSource` property. ````jsx import { Icon, Input, AutoComplete } from 'antd'; const Option = AutoComplete.Option; const OptGroup = AutoComplete.OptGroup; const dataSource = [{ title: '话题', children: [{ title: 'AntDesign', count: 10000, }, { title: 'AntDesign UI', count: 10600, }], }, { title: '问题', children: [{ title: 'AntDesign UI 有多好', count: 60100, }, { title: 'AntDesign 是啥', count: 30010, }], }, { title: '文章', children: [{ title: 'AntDesign 是一个设计语言', count: 100000, }], }]; function renderTitle(title) { return ( {title} 更多 ); } const options = dataSource.map(group => {group.children.map(opt => ) } ).concat([ , ]); function Complete() { return (
} />
); } ReactDOM.render(, mountNode); ```` ````css .certain-category-search.ant-select-auto-complete .ant-input-preSuffix-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; } ````