ant-design/components/auto-complete/demo/uncertain-category.md
2022-05-23 14:37:16 +08:00

80 lines
1.9 KiB
Markdown

---
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).
```tsx
import { AutoComplete, Input } from 'antd';
import type { SelectProps } from 'antd/es/select';
import React, { useState } from 'react';
const getRandomInt = (max: number, min = 0) => Math.floor(Math.random() * (max - min + 1)) + min;
const searchResult = (query: string) =>
new Array(getRandomInt(5))
.join('.')
.split('.')
.map((_, 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 App: 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>
);
};
export default App;
```