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
|
|
|
|
|
|
|
|
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';
|
2018-06-27 15:55:04 +08:00
|
|
|
|
2017-03-03 22:10:21 +08:00
|
|
|
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) {
|
2017-03-06 17:56:34 +08:00
|
|
|
return (
|
|
|
|
<span>
|
|
|
|
{title}
|
|
|
|
<a
|
|
|
|
style={{ float: 'right' }}
|
|
|
|
href="https://www.google.com/search?q=antd"
|
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer"
|
|
|
|
>更多
|
|
|
|
</a>
|
|
|
|
</span>
|
|
|
|
);
|
2017-03-03 22:10:21 +08:00
|
|
|
}
|
|
|
|
|
2017-05-15 14:37:22 +08:00
|
|
|
const options = dataSource.map(group => (
|
2017-03-03 22:10:21 +08:00
|
|
|
<OptGroup
|
|
|
|
key={group.title}
|
|
|
|
label={renderTitle(group.title)}
|
|
|
|
>
|
2017-05-15 14:37:22 +08:00
|
|
|
{group.children.map(opt => (
|
2017-03-03 22:10:21 +08:00
|
|
|
<Option key={opt.title} value={opt.title}>
|
|
|
|
{opt.title}
|
|
|
|
<span className="certain-search-item-count">{opt.count} 人 关注</span>
|
2017-05-15 14:37:22 +08:00
|
|
|
</Option>
|
|
|
|
))}
|
|
|
|
</OptGroup>
|
|
|
|
)).concat([
|
|
|
|
<Option disabled key="all" className="show-all">
|
|
|
|
<a
|
|
|
|
href="https://www.google.com/search?q=antd"
|
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer"
|
|
|
|
>
|
|
|
|
查看所有结果
|
|
|
|
</a>
|
|
|
|
</Option>,
|
|
|
|
]);
|
2017-03-03 22:10:21 +08:00
|
|
|
|
|
|
|
function Complete() {
|
|
|
|
return (
|
|
|
|
<div className="certain-category-search-wrapper" style={{ width: 250 }}>
|
|
|
|
<AutoComplete
|
|
|
|
className="certain-category-search"
|
|
|
|
dropdownClassName="certain-category-search-dropdown"
|
|
|
|
dropdownMatchSelectWidth={false}
|
|
|
|
dropdownStyle={{ width: 300 }}
|
|
|
|
size="large"
|
|
|
|
style={{ width: '100%' }}
|
|
|
|
dataSource={options}
|
|
|
|
placeholder="input here"
|
|
|
|
optionLabelProp="value"
|
|
|
|
>
|
2017-03-06 17:56:34 +08:00
|
|
|
<Input suffix={<Icon type="search" className="certain-category-icon" />} />
|
2017-03-03 22:10:21 +08:00
|
|
|
</AutoComplete>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
ReactDOM.render(<Complete />, mountNode);
|
|
|
|
````
|
|
|
|
|
|
|
|
````css
|
2017-03-18 21:26:42 +08:00
|
|
|
.certain-category-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix {
|
2017-03-06 17:56:34 +08:00
|
|
|
right: 12px;
|
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 {
|
|
|
|
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 {
|
2017-03-06 17:56:34 +08:00
|
|
|
color: #108ee9;
|
2017-03-03 22:10:21 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
.certain-category-icon {
|
|
|
|
color: #6E6E6E;
|
|
|
|
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
|
|
font-size: 16px;
|
|
|
|
}
|
|
|
|
````
|