乐仪
8 years ago
2 changed files with 127 additions and 0 deletions
@ -0,0 +1,126 @@ |
|||
--- |
|||
order: 3 |
|||
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. |
|||
|
|||
````__react |
|||
import { Icon, Button, Input, AutoComplete } from 'antd'; |
|||
const Option = AutoComplete.Option; |
|||
const InputGroup = Input.Group; |
|||
|
|||
function onSelect(value) { |
|||
console.log('onSelect', value); |
|||
} |
|||
|
|||
function getRandomInt(max, min = 0) { |
|||
return Math.floor(Math.random() * (max - min + 1)) + min; |
|||
} |
|||
|
|||
function searchResult(query) { |
|||
return (new Array(getRandomInt(5))).join('.').split('.') |
|||
.map((item, idx) => ({ |
|||
query, |
|||
category: `${query}${idx}`, |
|||
count: getRandomInt(200, 100), |
|||
})); |
|||
} |
|||
|
|||
function renderOption(item) { |
|||
return <Option key={item.category} text={item.category}> |
|||
{item.query} 在 |
|||
<a href={`https://s.taobao.com/search?q=${item.query}`} target="_blank">{item.category}</a> 区块中 |
|||
<span style={{float: 'right'}}>约 {item.count} 个结果</span> |
|||
</Option>; |
|||
} |
|||
|
|||
const Complete = React.createClass({ |
|||
getInitialState() { |
|||
return { |
|||
dataSource: [], |
|||
}; |
|||
}, |
|||
handleChange(value) { |
|||
if (value) { |
|||
this.setState({ |
|||
dataSource: searchResult(value), |
|||
}); |
|||
} |
|||
}, |
|||
render() { |
|||
const { dataSource } = this.state; |
|||
return ( |
|||
<div className="global-search-wrapper" style={{ width: 300 }}> |
|||
<AutoComplete |
|||
className="global-search" |
|||
size="large" |
|||
style={{ width: '100%'}} |
|||
dataSource={dataSource.map(renderOption)} |
|||
onSelect={onSelect} |
|||
onChange={this.handleChange} |
|||
placeholder="input here" |
|||
optionLabelProp="text" |
|||
> |
|||
<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-input { |
|||
height: 40px; |
|||
padding: 11px 12px; |
|||
} |
|||
|
|||
.global-search.ant-select-auto-complete .ant-select-selection__placeholder { |
|||
top: 20px; |
|||
margin-left: 12px; |
|||
margin-right: 12px; |
|||
} |
|||
|
|||
.global-search .search-btn { |
|||
font-size: 18px; |
|||
} |
|||
|
|||
.global-search.ant-select-auto-complete .ant-select-selection--single { |
|||
margin-right: -50px; |
|||
} |
|||
|
|||
.global-search.ant-select-auto-complete .ant-input-preSuffix-wrapper .ant-input:not(:last-child) { |
|||
padding-right: 62px; |
|||
} |
|||
|
|||
.global-search.ant-select-auto-complete .ant-input-preSuffix-wrapper .ant-input-suffix { |
|||
right: 0; |
|||
} |
|||
|
|||
.global-search.ant-select-auto-complete .ant-input-preSuffix-wrapper .ant-input-suffix button { |
|||
border-top-left-radius: 0; |
|||
border-bottom-left-radius: 0; |
|||
} |
|||
```` |
Loading…
Reference in new issue