antd的autocomplete多选
时间: 2024-09-27 16:15:58 浏览: 49
antd多选下拉框一行展示的实现方式
5星 · 资源好评率100%
antd中的Autocomplete组件是一个强大的输入框插件,它支持自动完成和多项选择功能。当设置`multiple`属性为`true`时,它会变为一个多选模式。以下是使用步骤:
1. 首先,在`<AutoComplete>`标签内,引入`options`数组,包含了可供用户选择的选项,每个选项通常是一个对象,可以包含文本和一个标识符(如ID):
```jsx
import { AutoComplete } from 'antd';
const options = [
{ value: 'Apple', label: '苹果' },
{ value: 'Banana', label: '香蕉' },
{ value: 'Orange', label: '橙子' },
];
```
2. 设置`multiple`属性为`true`,允许用户选择多个项目:
```jsx
<AutoComplete
multiple
options={options}
placeholder="请选择水果"
/>
```
3. 当用户输入内容时,可以选择列表中的项,或者通过`onSearch`回调动态获取更多数据。
阅读全文