mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 21:48:19 +08:00
2.0 KiB
2.0 KiB
order | title | ||||
---|---|---|---|---|---|
5 |
|
zh-CN
查询模式: 不确定类目 示例。
en-US
Demonstration of Lookup Patterns: Uncertain Category.
import React, { useState } from 'react';
import { Input, AutoComplete } from 'antd';
import { SelectProps } from 'antd/es/select';
function getRandomInt(max: number, min: number = 0) {
return Math.floor(Math.random() * (max - min + 1)) + min; // eslint-disable-line no-mixed-operators
}
const searchResult = (query: string) => {
return new Array(getRandomInt(5))
.join('.')
.split('.')
.map((item, idx) => {
const category = `${query}${idx}`;
return {
value: category,
label: (
<div
style={{
display: 'flex',
justifyContent: 'space-between',
}}
>
<span>
Found {query} on{' '}
<a
href={`https://s.taobao.com/search?q=${query}`}
target="_blank"
rel="noopener noreferrer"
>
{category}
</a>
</span>
<span>{getRandomInt(200, 100)} results</span>
</div>
),
};
});
};
const Complete: React.FC = () => {
const [options, setOptions] = useState<SelectProps<object>['options']>([]);
const handleSearch = (value: string) => {
setOptions(value ? searchResult(value) : []);
};
const onSelect = (value: string) => {
console.log('onSelect', value);
};
return (
<AutoComplete
dropdownMatchSelectWidth={252}
style={{ width: 300 }}
options={options}
onSelect={onSelect}
onSearch={handleSearch}
>
<Input.Search size="large" placeholder="input here" enterButton />
</AutoComplete>
);
};
ReactDOM.render(<Complete />, mountNode);