ant-design/components/auto-complete/demo/uncertain-category.md

128 lines
2.9 KiB
Markdown
Raw Normal View History

---
order: 5
title:
zh-CN: 查询模式 - 不确定类目
en-US: Lookup-Patterns - Uncertain Category
---
## zh-CN
[查询模式: 不确定类目](https://ant.design/docs/spec/reaction#Lookup-Patterns) 示例。
## en-US
Demonstration of [Lookup Patterns: Uncertain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns).
Basic Usage, set datasource of autocomplete with `dataSource` property.
2017-02-13 10:55:53 +08:00
````jsx
import { Icon, Button, Input, AutoComplete } from 'antd';
2018-06-27 15:55:04 +08:00
const Option = AutoComplete.Option;
function onSelect(value) {
console.log('onSelect', value);
}
function getRandomInt(max, min = 0) {
2017-02-13 10:55:53 +08:00
return Math.floor(Math.random() * (max - min + 1)) + min; // eslint-disable-line no-mixed-operators
}
function searchResult(query) {
return (new Array(getRandomInt(5))).join('.').split('.')
.map((item, idx) => ({
query,
category: `${query}${idx}`,
count: getRandomInt(200, 100),
}));
}
function renderOption(item) {
2017-02-13 10:55:53 +08:00
return (
<Option key={item.category} text={item.category}>
{item.query} 在
<a
href={`https://s.taobao.com/search?q=${item.query}`}
target="_blank"
rel="noopener noreferrer"
>
{item.category}
</a>
区块中
<span className="global-search-item-count">约 {item.count} 个结果</span>
2017-02-13 10:55:53 +08:00
</Option>
);
}
class Complete extends React.Component {
state = {
dataSource: [],
}
handleSearch = (value) => {
this.setState({
dataSource: value ? searchResult(value) : [],
});
}
render() {
const { dataSource } = this.state;
return (
<div className="global-search-wrapper" style={{ width: 300 }}>
<AutoComplete
className="global-search"
size="large"
2017-02-13 10:55:53 +08:00
style={{ width: '100%' }}
dataSource={dataSource.map(renderOption)}
onSelect={onSelect}
onSearch={this.handleSearch}
placeholder="input here"
optionLabelProp="text"
>
2017-02-13 10:55:53 +08:00
<Input
suffix={(
<Button className="search-btn" size="large" type="primary">
<Icon type="search" />
</Button>
)}
/>
</AutoComplete>
</div>
);
}
}
ReactDOM.render(<Complete />, mountNode);
````
````css
.global-search-wrapper {
padding-right: 50px;
}
.global-search {
width: 100%;
}
.global-search.ant-select-auto-complete .ant-select-selection--single {
2017-03-06 17:56:34 +08:00
margin-right: -46px;
}
.global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input:not(:last-child) {
padding-right: 62px;
}
.global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix {
right: 0;
}
.global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.global-search-item-count {
2017-03-06 17:56:34 +08:00
position: absolute;
right: 16px;
}
2017-02-13 10:55:53 +08:00
````