syncfusion-react-dropdowns

实现 Syncfusion React 下拉组件

AutoComplete

AutoComplete 组件会在用户于输入框中键入内容时提供匹配的建议列表，让用户从筛选结果中进行选择。它支持本地和远程数据、丰富的筛选选项、模板、分组、虚拟化和完整的无障碍功能。

文档和导航指南

入门

📄 阅读： references/getting-started.md

• 安装软件包（@syncfusion/ej2-react-dropdowns）
• CSS 导入和主题配置
• 基本组件设置（函数组件和类组件）
• 绑定简单的字符串数组
• 配置弹出窗口的高度和宽度（popupHeight、popupWidth）

数据绑定

📄 阅读： references/data-binding.md

• 字符串或数字数组
• 使用 fields 映射的对象数组（value、groupBy、iconCss）
• 复杂/嵌套对象数组（点号表示法字段映射）
• 使用 DataManager 处理远程数据（ODataV4Adaptor、WebApiAdaptor）
• 使用 query 属性筛选/选择远程数据
• 使用 sortOrder 按字母顺序排序

筛选

📄 阅读： references/filtering.md

• 筛选类型：StartsWith、EndsWith、Contains
• suggestionCount – 限制建议数量
• minLength – 触发搜索前所需的最少字符数
• ignoreCase – 区分大小写筛选
• ignoreAccent – 筛选时忽略变音符号
• debounceDelay – 延迟筛选以减少请求
• 使用 filtering 事件自定义筛选

分组

📄 阅读： references/grouping.md

• 使用 fields.groupBy 对项目分组
• 固定和内联分组标题
• 使用 groupTemplate 自定义分组标题

模板

📄 阅读： references/templates.md

• itemTemplate – 自定义每个列表项
• groupTemplate – 自定义分组标题
• headerTemplate – 静态弹出窗口标题
• footerTemplate – 静态弹出窗口页脚
• noRecordsTemplate – 未找到数据时显示的消息
• actionFailureTemplate – 远程获取失败时显示的消息

值绑定

📄 阅读： references/value-binding.md

• 绑定原始值（字符串、数字）
• 使用 allowObjectBinding 绑定对象
• 使用 value 属性预设选中值

虚拟化

📄 阅读： references/virtual-scroll.md

• 对大型数据集启用 enableVirtualization
• 注入 VirtualScroll 服务
• 对本地数据、远程数据和分组数据进行虚拟滚动
• 使用 query.take() 自定义项目数量

禁用项目

📄 阅读： references/disabled-items.md

• 通过 fields.disabled 禁用项目
• 使用 disableItem 方法动态禁用项目
• 使用 enabled={false} 禁用整个组件

无障碍功能和本地化

📄 阅读： references/accessibility-localization.md

• WAI-ARIA 角色和属性
• 键盘导航快捷键
• RTL 支持（enableRtl）
• 使用 L10n 进行本地化（noRecordsTemplate、actionFailureTemplate 文本）
• WCAG 2.2 合规性概述

样式和自定义

📄 阅读： references/styling.md

• wrapper、图标、焦点、占位符和选中项的 CSS 类目标
• 浮动标签自定义
• 弹出项外观
• 用于注入自定义类的 cssClass 属性
• 调整弹出窗口大小（allowResize）
• 必填星号样式

操作指南：自动填充、高亮和图标

📄 阅读： references/how-to.md

• autofill – 按下向下箭头时建议第一个匹配项
• highlight – 高亮建议列表中已键入的字符
• 使用 fields.iconCss 支持图标

API 参考

📄 阅读： references/api.md

• 所有属性的类型、默认值和说明
• 所有方法的参数和返回类型
• 所有事件的说明

快速入门示例

安装： 将软件包固定到特定主版本，以降低供应链风险。

npm install @syncfusion/ej2-react-dropdowns@^33.x.x @syncfusion/ej2-react-inputs@^33.x.x @syncfusion/ej2-base@^33.x.x

import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns'; // ^33.x.x
import '@syncfusion/ej2-base/styles/tailwind3.css';
import '@syncfusion/ej2-react-inputs/styles/tailwind3.css';
import '@syncfusion/ej2-react-dropdowns/styles/tailwind3.css';

const sportsData: string[] = [
  'Badminton', 'Basketball', 'Cricket', 'Football',
  'Golf', 'Hockey', 'Rugby', 'Snooker', 'Tennis'
];

export default function App() {
  return (
    <AutoCompleteComponent
      id="sports-ac"
      dataSource={sportsData}
      placeholder="Find a game"
    />
  );
}

常见模式

使用字段映射的对象数据源

const sportsData = [
  { id: 'Game1', game: 'Badminton' },
  { id: 'Game2', game: 'Basketball' },
];
const fields = { value: 'game' };

<AutoCompleteComponent dataSource={sportsData} fields={fields} placeholder="Find a game" />

远程数据绑定（安全优先）

安全： 不要直接从客户端代码调用任意第三方 URL。应通过可信的服务端代理路由外部 API 调用，并由该代理强制实施允许的端点、身份验证、速率限制和响应验证。

import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';

// Use a controlled server proxy endpoint here. Do not use public third-party URLs directly.
const customerData = new DataManager({
  adaptor: new ODataV4Adaptor(),
  crossDomain: true,
  url: 'https://your-trusted-proxy.example/api/customers'
});
const query = new Query().from('Customers').select(['ContactName', 'CustomerID']).take(6);
const fields = { value: 'ContactName' };

<AutoCompleteComponent
  dataSource={customerData}
  query={query}
  fields={fields}
  sortOrder="Ascending"
  placeholder="Find a customer" />

使用自定义选项进行筛选

<AutoCompleteComponent
  dataSource={sportsData}
  filterType="StartsWith"
  minLength={2}
  suggestionCount={5}
  debounceDelay={300}
  ignoreCase={true}
  placeholder="Type to search"
/>

通过 ref 访问方法

import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import { useRef } from 'react';

export default function App() {
  const acRef = useRef<AutoCompleteComponent>(null);

  return (
    <>
      <AutoCompleteComponent ref={acRef} dataSource={sportsData} placeholder="Find a game" />
      <button onClick={() => acRef.current?.showPopup()}>Open</button>
      <button onClick={() => acRef.current?.clear()}>Clear</button>
    </>
  );
}

ComboBox

ComboBox 组件提供下拉输入框，允许用户键入内容进行筛选，或从预定义列表中进行选择。它支持本地和远程数据绑定、自定义值、筛选、分组、模板、虚拟滚动和全面的无障碍功能。

组件概览

ComboBox 是一种专用下拉输入框，用于连接文本输入框与选择列表。主要特点：

• 混合输入： 用户可以键入内容进行筛选，也可以从下拉列表中选择
• 智能筛选： 默认按文本搜索，可针对复杂场景自定义
• 灵活的数据： 支持字符串、JSON 对象、OData、Web API、DataManager
• 丰富的 UI： 为项、页眉、页脚、选定值和无结果状态提供模板
• 高性能： 虚拟滚动可高效处理数千个项
• 支持全球化： 内置本地化、RTL 支持和 ARIA 属性
• 无障碍： 全面的键盘导航和屏幕阅读器支持

安装： 将软件包固定到特定主版本，以降低供应链风险。

npm install @syncfusion/ej2-react-dropdowns@^33.x.x

---

文档导航指南

根据任务选择起点：

入门

📄 阅读： references/getting-started.md

适合阅读的情况：

• 在新项目中设置 ComboBox
• 首次实现组件
• 了解基本用法（类组件与函数组件）
• 添加 CSS 导入和主题
• 启用自定义值

数据绑定与数据源

📄 阅读： references/data-binding.md

适合阅读的情况：

• 绑定本地数据（字符串数组、JSON 对象）
• 连接远程 API（OData、Web API、DataManager）
• 映射对象字段（text、value、groupBy、iconCss）
• 处理复杂的数据转换
• 了解数据源配置

筛选与搜索行为

📄 阅读： references/filtering-and-search.md

适合阅读的情况：

• 实现文本筛选
• 创建自定义筛选函数
• 配置搜索行为（区分大小写、部分匹配）
• 优化大型数据集的性能
• 处理无结果场景

分组与排序

📄 阅读： references/grouping-and-sorting.md

适合阅读的情况：

• 将项组织为逻辑分组
• 自定义分组标题的外观
• 应用排序顺序（升序／降序）
• 将分组与筛选结合使用
• 多级分组场景

模板与自定义

📄 阅读： references/templates-and-customization.md

适合阅读的情况：

• 创建自定义项模板
• 显示丰富内容（图片、图标、说明）
• 页眉／页脚模板（例如操作按钮、摘要）
• 设置选定值模板的格式
• 使用基于 CSS 类的样式和主题自定义

高级功能

📄 阅读： references/advanced-features.md

适合阅读的场景：

• 为大型数据集（10,000+ 项）实现虚拟滚动
• 国际化（i18n）与语言切换
• 支持阿拉伯语／希伯来语的 RTL（从右向左）
• 满足无障碍合规要求（WCAG 2.1、ARIA 属性）
• 禁用状态与多选工作流
• 键盘快捷键与焦点管理

样式与主题

📄 阅读： references/styling-and-theming.md

适合阅读的场景：

• 应用内置的 Syncfusion 主题（Material、Bootstrap、Tailwind）
• 使用 CSS 变量自定义品牌颜色
• 集成 Theme Studio 以自定义设计
• 响应式设计模式
• 支持深色模式／浅色模式

弹出窗口调整大小

📄 阅读： references/popup-resizing.md

适合阅读的场景：

• 允许用户动态调整下拉列表的大小
• 跨会话保存调整大小的偏好设置
• 使用自定义模板处理长内容
• 适配移动设备的下拉列表尺寸

操作指南

📄 阅读： references/how-to-guide.md

适合阅读的场景：

• 实现自动填充（输入时自动补全）
• 创建级联／依赖下拉列表（Country → State → City）
• 在列表项中显示图标
• 常见的实用实现方案

故障排除

📄 阅读： references/troubleshooting.md

适合阅读的场景：

• 性能问题（渲染缓慢、卡顿）
• 数据绑定问题
• 从 EJ1 ComboBox 迁移
• 常见边缘情况及解决方法
• 调试技巧与社区资源

API 参考

📄 阅读： references/api.md

适合阅读的场景：

• 查找特定属性、方法或事件名称及其类型
• 了解任意配置选项的默认值
• 查看事件参数的结构（ChangeEventArgs、FilteringEventArgs 等）
• 查看所有可用于程序化控制的方法
• 浏览接口模型（FieldSettingsModel、PopupEventArgs 等）

---

快速入门示例

安装与设置

安装： 将软件包固定到特定主版本，以降低供应链风险。

npm install @syncfusion/ej2-react-dropdowns@^33.x.x

基本 ComboBox（函数组件）

import { ComboBoxComponent } from '@syncfusion/ej2-react-dropdowns';
import '@syncfusion/ej2-base/styles/tailwind3.css';
import '@syncfusion/ej2-react-dropdowns/styles/tailwind3.css';

export default function App() {
  const sportsList = ['Badminton', 'Cricket', 'Football', 'Golf', 'Tennis'];

  return (
    <ComboBoxComponent 
      id="combobox"
      dataSource={sportsList}
      placeholder="Select a sport"
      allowCustom={true}
    />
  );
}

使用数据绑定（JSON 对象）

export default function App() {
  const sportsData = [
    { Id: 'game1', Game: 'Badminton', Players: 2 },
    { Id: 'game2', Game: 'Football', Players: 11 },
    { Id: 'game3', Game: 'Cricket', Players: 11 }
  ];

  const fields = { text: 'Game', value: 'Id' };

  return (
    <ComboBoxComponent 
      id="combobox"
      dataSource={sportsData}
      fields={fields}
      placeholder="Select a game"
      change={(e) => console.log('Selected:', e.value)}
    />
  );
}

---

常见模式

模式 1：用于用户选择的筛选搜索

问题： 用户需要在包含 500+ 条目的列表中查找项目。
解决方案： 使用筛选和受控输入，仅显示匹配的项目。对于超大型数据集（5,000+ 项），可结合使用 enableVirtualization 并注入 VirtualScroll。

import { ComboBoxComponent, Inject, VirtualScroll } from '@syncfusion/ej2-react-dropdowns';

const [filterValue, setFilterValue] = useState('');

<ComboBoxComponent 
  dataSource={largeDataset}
  fields={{ text: 'name', value: 'id' }}
  filtering={(e) => filterByName(e, 'name')}
  change={(e) => setFilterValue(e.value)}
  allowFiltering={true}
  enableVirtualization={true}
  popupHeight="200px"
>
  <Inject services={[VirtualScroll]} />
</ComboBoxComponent>

模式 2：分组类别

问题： 需要按类型组织项目，以便清晰浏览。
解决方案： 使用 groupBy 字段映射，并按类别对数据分组。

const categorizedData = [
  { Category: 'Sports', Item: 'Cricket', value: 1 },
  { Category: 'Sports', Item: 'Football', value: 2 },
  { Category: 'Games', Item: 'Chess', value: 3 },
  { Category: 'Games', Item: 'Carrom', value: 4 }
];

const fields = { 
  text: 'Item', 
  value: 'value', 
  groupBy: 'Category' 
};

<ComboBoxComponent dataSource={categorizedData} fields={fields} />

模式 3：带加载状态的远程数据（安全优先）

问题： 根据用户搜索从 API 获取数据。

安全优先的解决方案： 通过可信的服务端代理转发外部 API 请求，并验证和清理响应。请勿在客户端代码中直接嵌入第三方 URL。

import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';

// Use your server-side proxy here. The proxy should enforce allowed upstream hosts and
// sanitize responses before returning to the client.
const dataManager = new DataManager({
  url: 'https://your-trusted-proxy.example/api/search',
  adaptor: new WebApiAdaptor()
});

<ComboBoxComponent 
  dataSource={dataManager}
  fields={{ text: 'name', value: 'id' }}
  allowFiltering={true} />

模式 4：用于丰富内容的自定义模板

问题： 为每个项目显示图标或附加信息。
解决方案： 使用 itemTemplate 属性自定义 HTML 渲染。

const itemTemplate = (props) => {
  return (
    <div className="flex items-center gap-2">
      <span className={`icon icon-${props.value}`}></span>
      <span>{props.name}</span>
      <small className="text-gray-500">({props.players} players)</small>
    </div>
  );
};

<ComboBoxComponent 
  dataSource={sportsData}
  itemTemplate={itemTemplate}
  fields={{ text: 'name', value: 'id' }}
/>

---

关键属性参考

属性	类型	描述	常见用途
dataSource	Array|DataManager	要显示的数据项	所有使用场景
fields	FieldSettingsModel	映射数据字段（text、value、groupBy、iconCss、disabled）	复杂数据
placeholder	string	内容为空时显示的提示文本	UX 指引
allowCustom	boolean	允许用户输入列表中不存在的自定义值。默认值：true	开放式输入
allowFiltering	boolean	在弹出框中启用筛选栏（搜索框）。默认值：false	搜索功能
enableVirtualization	boolean	为大型数据集启用虚拟滚动。需要 <Inject services={[VirtualScroll]} />。默认值：false	大型数据集（5,000 项以上）
sortOrder	SortOrder	'None' | 'Ascending' | 'Descending'。默认值：null	排序列表
popupHeight	string|number	下拉列表高度（例如，'300px'）。默认值：'300px'	布局控制
popupWidth	string|number	下拉列表宽度（例如，'100%'）。默认值：'100%'	布局控制
enabled	boolean	启用/禁用组件。默认值：true	条件渲染
readonly	boolean	阻止用户输入。默认值：false	只读模式
showClearButton	boolean	显示清除（×）按钮。默认值：true	允许清除所选项
change	EmitType<ChangeEventArgs>	所选项发生变化时触发	事件处理
filtering	EmitType<FilteringEventArgs>	用户输入时触发；可用于自定义筛选逻辑	高级搜索
itemTemplate	Function|string	为每个列表项自定义 HTML	丰富的 UI

---

后续步骤

1. 初次使用 ComboBox？ → 从 getting-started.md 开始
2. 需要特定数据？ → 查看 data-binding.md
3. 有性能方面的顾虑？ → 查看 advanced-features.md
4. 自定义设计？ → 查看 styling-and-theming.md
5. 需要了解常见场景？ → 浏览 how-to-guide.md（自动填充、级联、图标）
6. 需要调整下拉列表大小？ → 阅读 popup-resizing.md
7. 遇到问题？ → 查看 troubleshooting.md
8. 需要完整的 API 详情？ → 查看 api.md，了解所有属性、方法、事件和接口模型

DropDownList

DropDownList 组件提供一组预定义值，供用户从中选择单个值。它支持本地和远程数据绑定、筛选、分组、自定义模板、虚拟滚动、无障碍功能和丰富的自定义选项。

导航指南

入门

📄 阅读： references/getting-started.md

• 安装和软件包设置（@syncfusion/ej2-react-dropdowns）
• 使用 tailwind3 主题导入 CSS
• 基本 DropDownList（函数组件和类组件）
• 绑定数据源
• 配置弹出框的高度和宽度

数据绑定和值绑定

📄 阅读： references/data-binding.md

• 绑定原始类型数组（字符串、数字）
• 使用 fields 映射（text、value、groupBy、iconCss）绑定 JSON 对象数组
• 使用 DataManager 绑定远程数据（OData、ODataV4、WebAPI 适配器）
• 值绑定：预选值、绑定原始类型与复杂对象
• 使用 fields.disabled 禁用单个数据项

筛选

📄 阅读： references/filtering.md

• 启用 allowFiltering，实现输入即搜索
• 在 filtering 事件中使用 updateData
• 阻止默认筛选 — 在自定义处理程序中始终设置 args.preventDefaultAction = true
• 筛选类型：startswith、contains、endsWith，以及区分大小写选项
• 按多个字段筛选 — 使用 Predicate 和 .or()，将输入的文本与 text 和 value 字段（或任意组合）进行匹配
• 带最少字符数限制的远程／服务器端筛选
• 变音符号筛选（ignoreAccent）、防抖延迟
• 高亮筛选后的文本、自定义搜索逻辑

分组与模板

📄 阅读： references/grouping-and-templates.md

• 使用 groupBy 字段对项目分组
• 固定和内联分组标题
• 自定义分组标题模板
• 项目模板、值（已选中）模板
• 页眉和页脚模板
• 无记录和操作失败模板

功能与配置

📄 阅读： references/features-and-configuration.md

• 排序（sortOrder：升序、降序）
• 为大型列表启用虚拟滚动（enableVirtualization）
• 调整弹出窗口大小（allowResize）
• 增量搜索、清除按钮、只读、禁用
• RTL 支持、Preact 用法

无障碍、样式与本地化

📄 阅读： references/accessibility-styling-localization.md

• 符合 WCAG 2.2 / Section 508
• 键盘导航快捷键
• ARIA 角色和属性
• cssClass 属性 — 每个实例的作用域 CSS 类、多个类、条件类、内置实用类（e-error、e-success）
• CSS 类自定义（包装器、图标、弹出窗口、列表项、占位符）
• 主题（tailwind3、material3、bootstrap5、fluent2）
• 本地化（L10n、noRecordsTemplate、actionFailureTemplate）
• RTL 布局（enableRtl）

API 参考

📄 阅读： references/api.md

• 完整的属性参考，包含类型、默认值和用法示例
• 所有方法的签名、参数和返回类型
• 所有事件的参数接口和用法示例
• 接口详情：FieldSettingsModel、ChangeEventArgs、SelectEventArgs、PopupEventArgs、FilteringEventArgs
• 属性、方法和事件的速查摘要表

操作模式

📄 阅读： references/how-to.md

• 动态添加、删除或修改项目
• 级联（依赖）下拉列表
• 多个级联下拉列表
• 远程数据操作指南
• 滚动时关闭弹出窗口、为项目添加工具提示、在项目中添加图标
• 值更改事件、清除选中值

---

快速入门示例

安装： 将软件包固定到特定的主版本，以降低供应链风险。

npm install @syncfusion/ej2-react-dropdowns@^33.x.x --save

// 1. See pinned install command above.

// 2. CSS in src/App.css
// @import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
// @import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css";
// @import "../node_modules/@syncfusion/ej2-react-dropdowns/styles/tailwind3.css";

import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import './App.css';

export default function App() {
  const sportsData: string[] = ['Badminton', 'Cricket', 'Football', 'Golf', 'Tennis'];

  return (
    <DropDownListComponent
      id="ddlelement"
      dataSource={sportsData}
      placeholder="Select a game"
    />
  );
}

常见模式

使用字段映射的 JSON 对象数据

import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';

export default function App() {
  const countryData = [
    { Id: 'au', Country: 'Australia' },
    { Id: 'br', Country: 'Brazil' },
    { Id: 'cn', Country: 'China' },
    { Id: 'in', Country: 'India' },
  ];
  const fields = { text: 'Country', value: 'Id' };

  return (
    <DropDownListComponent
      dataSource={countryData}
      fields={fields}
      placeholder="Select a country"
    />
  );
}

筛选（输入即搜索）

import { DropDownListComponent, FilteringEventArgs } from '@syncfusion/ej2-react-dropdowns';
import { Query } from '@syncfusion/ej2-data';

export default function App() {
  const searchData = [
    { Index: 's1', Country: 'Alaska' },
    { Index: 's2', Country: 'California' },
    { Index: 's3', Country: 'Florida' },
  ];
  const fields = { text: 'Country', value: 'Index' };

  function onFiltering(args: FilteringEventArgs) {
    // Local example: updateData is applied against local `searchData` below.
    // For remote filtering, route requests through a trusted server proxy and
    // validate/sanitize responses before calling `updateData`.
    args.preventDefaultAction = true; // prevent built-in filter from running alongside custom logic
    let query = new Query();
    query = args.text !== '' ? query.where('Country', 'startswith', args.text, true) : query;
    args.updateData(searchData, query);
  }

  return (
    <DropDownListComponent
      dataSource={searchData}
      fields={fields}
      allowFiltering={true}
      filtering={onFiltering}
      placeholder="Select a country"
    />
  );
}

预选一个值

<DropDownListComponent
  dataSource={sportsData}
  value="Cricket"
  placeholder="Select a game"
/>

分组项目

const vegetableData = [
  { Vegetable: 'Cabbage', Category: 'Leafy and Salad', Id: 'item1' },
  { Vegetable: 'Chickpea', Category: 'Beans', Id: 'item6' },
  { Vegetable: 'Garlic',   Category: 'Bulb and Stem', Id: 'item9' },
];
const fields = { groupBy: 'Category', text: 'Vegetable', value: 'Id' };

<DropDownListComponent dataSource={vegetableData} fields={fields} placeholder="Select a vegetable" />

关键属性

属性	类型	用途
dataSource	any[] | DataManager	列表项的数据
fields	FieldSettingsModel	映射 text、value、groupBy、iconCss、disabled
value	string | number	选中／预选的值
placeholder	string	输入框占位文本
allowFiltering	boolean	启用搜索筛选
filtering	event	自定义筛选逻辑的处理程序
popupHeight	string	弹出列表高度（默认自动）
popupWidth	string	弹出列表宽度（默认与输入框相同）
sortOrder	SortOrder	'None'、'Ascending'、'Descending'
enableVirtualization	boolean	针对大型数据启用虚拟滚动
allowResize	boolean	允许用户调整弹出框大小
enabled	boolean	启用／禁用整个组件
readonly	boolean	只读模式
showClearButton	boolean	显示 ✕ 按钮以清除选择
enableRtl	boolean	从右向左布局

常见用例

简单静态列表 → 将 string[] 传给 dataSource 即可。

来自 API 的数据 → 使用 DataManager 和 WebApiAdaptor；请阅读 references/data-binding.md。

随用户输入搜索／筛选 → 设置 allowFiltering={true}，处理 filtering 事件；请阅读 references/filtering.md。

分类项 → 映射 groupBy 字段；请阅读 references/grouping-and-templates.md。

自定义项布局 → 使用 itemTemplate；请阅读 references/grouping-and-templates.md。

大型数据集（10k+ 项） → 启用 enableVirtualization，并注入 VirtualScroll；请阅读 references/features-and-configuration.md。

关联下拉列表 → 在第一个下拉列表的 change 事件中重新加载第二个下拉列表的 dataSource；请阅读 references/how-to.md。

ListBox

Syncfusion ListBox 组件会在可滚动容器中显示列表项，支持单选或多选。它支持本地和远程数据绑定、拖放排序、筛选、分组、自定义模板、双列表传输以及完整的无障碍功能。

文档指南

根据实现需求，前往相应主题：

入门

📄 阅读： references/getting-started.md

• React 应用设置（Vite/Create React App）
• 安装 Syncfusion 软件包
• CSS 导入和主题设置
• 创建基本的 ListBox 组件
• 运行应用程序

选择与事件

📄 阅读： references/selection.md

• 单选模式
• 多选模式
• 选择事件和处理程序
• 以编程方式管理选择
• 使用选中项

数据绑定与结构

📄 阅读： references/data-binding.md

• 数组和对象数据绑定
• 文本和数值属性
• 数据源配置
• 数据分组
• 层次结构数据

自定义模板与图标

📄 阅读： references/icons-and-templates.md

• 在项中渲染图标
• 自定义项模板
• HTML 内容渲染
• 模板变量和语法
• 条件渲染

高级功能

📄 阅读： references/features.md

• 拖放功能
• 筛选和搜索
• 排序和分组
• 双 ListBox（传输列表）
• 滚动器配置
• 启用／禁用项

样式与外观

📄 阅读： references/style-and-appearance.md

• CSS 类自定义
• 主题集成
• 项和分组样式设置
• 响应式设计
• 自定义 CSS 变量

无障碍功能

📄 阅读： references/accessibility.md

• 符合 WCAG 2.2 标准
• 键盘导航
• ARIA 属性
• 屏幕阅读器支持
• RTL（从右向左）支持

操作指南

📄 阅读： references/how-to-guides.md

• 动态添加项目
• 以编程方式选择项目
• 启用／禁用项目
• 筛选 ListBox 数据
• 为长列表启用滚动条
• 表单集成与提交

双列表框（传输）

📄 阅读： references/dual-list-box.md

• 在列表之间双向传输项目
• 工具栏操作（上移／下移、传输）
• 权限和技能分配模式
• 自定义样式和响应式设计
• 容量限制和验证

API 参考

📄 阅读： references/api.md

• 所有属性的完整列表，包括类型和默认值
• 所有公共方法的参数详情和返回类型
• 所有事件的完整事件参数接口
• 子接口：SelectionSettingsModel、ToolbarSettingsModel、FieldSettingsModel、SourceDestinationModel

---

快速入门示例

安装： 将软件包固定到特定主版本，以降低供应链风险。

npm install @syncfusion/ej2-react-dropdowns@^33.x.x @syncfusion/ej2-base@^33.x.x

具有单选功能的基本 ListBox：

import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns'; // ^33.x.x
import './App.css';

function App() {
  const data = [
    { text: 'JavaScript', id: '1' },
    { text: 'TypeScript', id: '2' },
    { text: 'React', id: '3' },
    { text: 'Vue', id: '4' },
    { text: 'Angular', id: '5' }
  ];

  const handleChange = (e) => {
    console.log('Selected:', e.value);
  };

  return (
    <ListBoxComponent 
      dataSource={data}
      fields={{ text: 'text', value: 'id' }}
      selectionSettings={{ mode: 'Single' }}
      change={handleChange}
    />
  );
}

export default App;

---

常见模式

多选

<ListBoxComponent 
  dataSource={data}
  selectionSettings={{ mode: 'Multiple' }}
/>

复选框选择

需要注入 CheckBoxSelection 服务。

import { ListBoxComponent, SelectionSettingsModel, Inject, CheckBoxSelection } from '@syncfusion/ej2-react-dropdowns';

const selectionSettings: SelectionSettingsModel = { showCheckbox: true };

<ListBoxComponent dataSource={data} selectionSettings={selectionSettings}>
  <Inject services={[CheckBoxSelection]} />
</ListBoxComponent>

带搜索／筛选

<ListBoxComponent 
  dataSource={data}
  allowFiltering={true}
  filterBarPlaceholder="Search items"
/>

自定义项目模板

const itemTemplate = (props) => {
  return (
    <div>
      <span className="icon">{props.icon}</span>
      <span>{props.text}</span>
    </div>
  );
}

<ListBoxComponent 
  dataSource={data}
  itemTemplate={itemTemplate}
/>

对项目分组

<ListBoxComponent 
  dataSource={groupedData}
  fields={{ text: 'text', groupBy: 'category' }}
/>

---

主要属性和配置

属性	用途	示例
dataSource	要显示的项目数组	[{ text: 'Item', id: '1' }]
fields	将数据属性映射为显示内容	{ text: 'name', value: 'id' }
selectionSettings	定义选择模式和复选框显示方式。对于 showCheckbox: true，需注入 CheckBoxSelection 服务	{ mode: 'Multiple' } / { showCheckbox: true }
allowFiltering	启用筛选搜索框	true
allowDragAndDrop	启用项目拖放	true
itemTemplate	项目的自定义模板	返回 JSX 的函数
enabled	启用／禁用组件	true / false

---

常见用例

1. 选择框架 - 从框架列表中单选，并显示图标
2. 多选语言 - 多选并使用搜索筛选
3. 技能选择器 - 使用带徽章和描述的自定义模板
4. 拖放传输 - 使用双列表框在列表之间移动项目
5. 分组类别 - 按类别整理项目，并显示组标题
6. 可搜索项目列表 - 支持筛选功能的大型列表
7. 无障碍菜单 - 支持完整的键盘导航和屏幕阅读器

---

后续步骤

1. 从入门指南开始进行初始设置
2. 选择用例（选择模式、模板、功能）
3. 阅读相关参考文档了解实现细节
4. 复制代码示例并根据需要自定义
5. 使用无障碍指南确保符合 WCAG 标准

需要帮助？ 每个参考文件都包含示例、边缘情况和故障排除提示。

提及

Mention 组件附加到目标可编辑元素（例如 <div contenteditable>），并在用户输入触发字符（默认值为 @）时显示建议弹窗。选择项目后，该项目会以内联方式插入编辑器。

文档和导航指南

入门

📄 阅读： references/getting-started.md

• 安装和软件包设置（@syncfusion/ej2-react-dropdowns）
• CSS 主题导入
• 使用 target 属性设置基本的 MentionComponent
• 绑定简单的数据源
• 自定义触发字符（mentionChar）和 showMentionChar

⚠️ 安全提示： 安装 npm 软件包（@syncfusion/ej2-react-dropdowns 及相关软件包）必须经过审慎考虑并由用户确认。未经用户明确批准，不要允许自动化 Agent 运行 npm install，因为这会带来供应链风险。

处理数据

📄 阅读： references/working-with-data.md

• 绑定字符串数组、JSON 对象和复杂嵌套数据
• 映射 fields（text、value、groupBy、iconCss）
• 使用 OData V4 处理远程数据（ODataV4Adaptor）
• 使用 Web API 处理远程数据（WebApiAdaptor）
• 使用 query 筛选／选择远程字段

筛选数据

📄 阅读： references/filtering-data.md

• 设置筛选所需的最少字符数（minLength）
• 更改筛选类型：Contains、StartsWith、EndsWith
• 允许搜索文本中包含空格（allowSpaces）
• 自定义建议数量（suggestionCount）
• 设置筛选防抖延迟（debounceDelay）

模板

📄 阅读： references/template.md

• 使用项模板（itemTemplate）自定义列表渲染
• 使用显示模板（displayTemplate）设置所选值的格式
• 无记录模板（noRecordsTemplate）
• 微调器／加载模板（spinnerTemplate）
• 分组标题模板（groupTemplate）

自定义

📄 阅读： references/customization.md

• 在输出中显示／隐藏提及字符（showMentionChar）
• 在所选项后追加后缀文本（suffixText）
• 配置弹出窗口的高度和宽度（popupHeight、popupWidth）
• 自定义触发字符（mentionChar）
• 要求前导空格（requireLeadingSpace）
• 自定义 CSS 类（cssClass）
• 突出显示匹配的字符（highlight）
• 搜索时忽略重音符号／大小写（ignoreAccent、ignoreCase）
• 设置弹出窗口的 Z-index（zIndex）

排序

📄 阅读： references/sorting.md

• 对建议列表排序：Ascending、Descending、None

禁用项

📄 阅读： references/disabled-items.md

• 通过 fields.disabled 禁用项
• 使用 disableItem() 方法动态禁用项

无障碍

📄 阅读： references/accessibility.md

• WAI-ARIA 属性（aria-selected、aria-activedescendent、aria-owns）
• 键盘导航快捷键
• 符合 WCAG 2.2 和 Section 508 标准
• 支持 RTL（enableRtl）

本地化

📄 阅读： references/localization.md

• 通过 L10n 本地化 noRecordsTemplate 文本
• 设置 locale 属性

API 参考

📄 阅读： references/api.md

• 所有属性、方法和事件
• target、dataSource、fields、mentionChar、minLength、suggestionCount
• 方法：addItem、disableItem、getDataByValue、getItems、showPopup、hidePopup、search、destroy
• 事件：select、change、filtering、beforeOpen、opened、closed、dataBound、actionBegin、actionComplete、actionFailure

快速入门示例

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';

// CSS imports
// @import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
// @import "../node_modules/@syncfusion/ej2-react-dropdowns/styles/tailwind3.css";

function App() {
  const mentionTarget = '#commentBox';
  const users = [
    { Name: 'Selma Rose', EmailId: '[email protected]' },
    { Name: 'Robert', EmailId: '[email protected]' },
    { Name: 'William', EmailId: '[email protected]' },
  ];
  const fields = { text: 'Name' };

  return (
    <div>
      <label>Comments</label>
      <div id="commentBox" placeholder="Type @ to mention a user"></div>
      <MentionComponent
        target={mentionTarget}
        dataSource={users}
        fields={fields}
      />
    </div>
  );
}

export default App;

常见模式

自定义触发字符

使用 mentionChar 将触发字符设为 #，而非 @：

<MentionComponent
  target="#editor"
  dataSource={tags}
  mentionChar="#"
  showMentionChar={true}
/>

使用筛选处理远程数据（安全优先）

import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';

// SECURITY: Do not call third-party endpoints from the browser. Use a server-side
// proxy that you control and that validates/sanitizes upstream responses.
const dataSource = new DataManager({
  url: 'https://your-trusted-proxy.example/api/mentions',
  adaptor: new ODataV4Adaptor(),
  crossDomain: true,
});
const query = new Query().from('Customers').select(['ContactName', 'CustomerID']).take(6);
const fields = { text: 'ContactName', value: 'CustomerID' };

<MentionComponent
  target="#editor"
  dataSource={dataSource}
  fields={fields}
  query={query}
  minLength={2}
  popupWidth="250px" />

处理选择事件

import { SelectEventArgs } from '@syncfusion/ej2-react-dropdowns';

function onSelect(args: SelectEventArgs) {
  console.log('Selected item:', args.itemData);
  console.log('Selected text:', args.text);
}

<MentionComponent
  target="#editor"
  dataSource={users}
  fields={{ text: 'Name' }}
  select={onSelect}
/>

弹出窗口配置

<MentionComponent
  target="#editor"
  dataSource={data}
  fields={{ text: 'Name' }}
  popupHeight="200px"
  popupWidth="300px"
  suggestionCount={10}
  sortOrder="Ascending"
  suffixText="&nbsp;"
/>

主要属性摘要

属性	类型	默认值	用途
target	string|HTMLElement	—	可编辑区域的 CSS 选择器或元素
dataSource	array|DataManager	[]	建议项数据
fields	FieldSettingsModel	{text:null,value:null}	映射数据字段
mentionChar	string	'@'	触发字符
showMentionChar	boolean	false	在插入的文本前添加触发字符
minLength	number	0	搜索前所需的最少字符数
suggestionCount	number	25	弹出窗口中的最多条目数
filterType	FilterType	'Contains'	筛选匹配策略
allowSpaces	boolean	false	允许搜索词中包含空格
sortOrder	SortOrder	'None'	排序方向
popupHeight	string|number	'300px'	弹出窗口高度
popupWidth	string|number	'auto'	弹出窗口宽度
suffixText	string	null	选择后追加的文本
requireLeadingSpace	boolean	true	触发字符前是否必须有空格
highlight	boolean	false	高亮显示搜索字符

MultiSelect

用于实现 MultiSelect 下拉组件的综合技能，支持用户从列表中选择多个值，并提供筛选、分组、模板、复选框、标签、虚拟滚动等功能。

组件概览

安装： 将软件包固定到特定的主版本，以降低供应链风险。

npm install @syncfusion/ej2-react-dropdowns@^33.x.x @syncfusion/ej2-base@^33.x.x @syncfusion/ej2-buttons@^33.x.x @syncfusion/ej2-inputs@^33.x.x

import { MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns'; // ^33.x.x
import '@syncfusion/ej2-react-dropdowns/styles/tailwind3.css';
// Also import base dependencies:
// @syncfusion/ej2-base/styles/tailwind3.css
// @syncfusion/ej2-buttons/styles/tailwind3.css
// @syncfusion/ej2-inputs/styles/tailwind3.css

软件包： @syncfusion/ej2-react-dropdowns
主组件： MultiSelectComponent
复选框模块： CheckBoxSelection（通过 <Inject services={[CheckBoxSelection]} /> 注入）
虚拟滚动模块： VirtualScroll（通过 <Inject services={[VirtualScroll]} /> 注入）

快速入门示例

import { MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';

export default function App() {
  const sportsData = ['Badminton', 'Basketball', 'Cricket', 'Football', 'Golf', 'Tennis'];

  return (
    <MultiSelectComponent
      id="multiselect"
      dataSource={sportsData}
      placeholder="Select sports"
    />
  );
}

使用对象和字段映射：

import { MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';

export default function App() {
  const sportsData = [
    { id: 'game1', sports: 'Badminton' },
    { id: 'game2', sports: 'Football' },
    { id: 'game3', sports: 'Tennis' },
  ];
  const fields = { text: 'sports', value: 'id' };

  return (
    <MultiSelectComponent
      id="multiselect"
      dataSource={sportsData}
      fields={fields}
      placeholder="Select a game"
    />
  );
}

文档与导航指南

开始使用

📄 阅读： references/getting-started.md

• 安装和软件包设置（Vite / CRA）
• CSS 导入与主题
• 基本 MultiSelect 实现（类组件和函数组件）
• 绑定简单数据源
• 弹出窗口高度和宽度配置

数据绑定

📄 阅读： references/data-binding.md

• 字符串数组与对象数组
• 字段映射（text、value、groupBy、iconCss、disabled）
• 通过 DataManager 获取远程数据（OData、OData V4、Web API）
• JSON/JSONP 格式
• 复杂数据绑定注意事项

分组

📄 阅读： references/grouping.md

• 使用 groupBy 按类别对条目分组
• 行内分组标题与固定分组标题
• 分组标题模板
• 排序与多级分组

筛选

📄 阅读： references/filtering.md

• 启用 allowFiltering
• 处理 filtering 事件
• 使用 where() 条件的 Query API
• 筛选类型：startswith、contains、endswith
• 区分大小写、多条件和性能

模板

📄 阅读： references/templates.md

• 用于自定义列表项布局的项目模板
• 用于显示选中项的值/标签模板
• 分组标题模板
• 标题、页脚、无记录和操作失败模板

选择模式与功能

📄 阅读： references/selection-and-features.md

• 复选框模式（注入 CheckBoxSelection）
• 标签显示和 tagging 事件
• 自定义值（allowCustomValue）
• 值绑定（基本类型和对象类型）
• 通过 fields.disabled 禁用条目
• 弹出窗口调整大小（allowResize）
• 面向大型数据集的虚拟滚动（注入 VirtualScroll）

无障碍、样式和本地化

📄 阅读： references/accessibility-styling-localization.md

• WAI-ARIA 属性和键盘快捷键
• WCAG 2.2 / Section 508 / 屏幕阅读器支持
• CSS 自定义（标签、包装器、图标、分隔符）
• RTL 支持
• 使用 L10n 进行本地化

API 参考

📄 阅读： references/api.md

• 所有属性的完整列表，包含类型、说明和默认值
• 所有公共方法及其参数详情和返回类型
• 所有事件及其参数类型和触发条件

关键属性参考

属性	类型	使用时机
dataSource	string[] | object[] | DataManager	始终必需 — 要显示的数据
fields	FieldSettingsModel	使用对象数据时；映射 text、value、groupBy、disabled
mode	'Default' | 'Box' | 'CheckBox' | 'Delimiter'	更改选择显示方式：标签（Box）、复选框或逗号分隔
value	string[] | number[] | object[]	加载时预选项目
allowFiltering	boolean	启用输入即搜索筛选
allowCustomValue	boolean	允许用户输入列表中没有的值
allowObjectBinding	boolean	将完整对象作为所选值返回，而不是基本类型
enableVirtualization	boolean	项目超过 500 个时使用，以提升性能
allowResize	boolean	允许用户调整弹出窗口大小
popupHeight	string	限制弹出列表高度（默认值：300px）
popupWidth	string	设置弹出窗口宽度（默认值：与输入框相同）
placeholder	string	输入框占位文本

常见用例

多标签输入（标签显示）： → 使用 mode="Box"（默认值）。每个选项都会显示为一个标签。

复选框多选： → 使用 mode="CheckBox" 并注入 CheckBoxSelection 模块。

搜索/筛选长列表： → 设置 allowFiltering={true}，并处理 filtering 事件以获取远程数据。

预选值： → 将值字段的值数组作为 value 属性传入：value={['id1', 'id2']}。

按类别分组： → 在 fields 属性中添加 groupBy：fields={{ text: 'name', value: 'id', groupBy: 'category' }}。

大型数据集（1000 项以上）： → 设置 enableVirtualization={true} 并注入 VirtualScroll 模块。

禁用特定选项： → 在数据中添加布尔类型的 disabled 列并映射该列：fields={{ ..., disabled: 'isDisabled' }}。

列表中不存在的自定义条目： → 设置 allowCustomValue={true}；处理 customValueSelection 事件以执行自定义操作。

选择指南

User wants multiple selections?
  ├── Visual chips with filter → mode="Box" (default) + allowFiltering
  ├── Checkbox-style list      → mode="CheckBox" + Inject CheckBoxSelection
  └── Comma-separated display  → mode="Delimiter"

Data source type?
  ├── Simple strings/numbers   → Pass array directly to dataSource
  ├── Objects                  → Pass array + fields={{ text, value }}
  └── Remote API               → Use DataManager + allowFiltering + filtering event

List is very long?
  └── Yes (500+) → enableVirtualization={true} + Inject VirtualScroll

Need custom item layout?
  └── Use itemTemplate, valueTemplate, groupTemplate props

Need localization?
  └── Read references/accessibility-styling-localization.md

多列组合框

Syncfusion 的 MultiColumnComboBoxComponent 会呈现一个带有多列弹出网格的组合框，让用户可以从结构化表格数据中进行选择。它支持本地和远程数据、筛选、排序、分组、模板、虚拟化，并全面符合无障碍标准。

软件包： @syncfusion/ej2-react-multicolumn-combobox

导航指南

入门

📄 阅读： references/getting-started.md

• 安装和软件包设置
• CSS 导入和主题配置（Tailwind 3）
• 呈现第一个 MultiColumnComboBoxComponent
• 使用 ColumnDirective 绑定 dataSource、fields 和 columns
• 配置 popupHeight 和 popupWidth
• 最小可运行示例（函数组件和类组件）

列

📄 阅读： references/columns.md

• 使用 ColumnDirective 和 ColumnsDirective 定义列
• field、header、width — 核心列属性
• 使用 textAlign 设置列文本对齐方式
• 使用 template 自定义单元格渲染
• 使用 displayAsCheckBox 显示布尔列
• 使用 customAttributes 自定义列 CSS
• 使用 headerTemplate 自定义列标题
• 使用 format 格式化数据

数据绑定

📄 阅读： references/data-binding.md

• 通过 dataSource 绑定本地对象数组
• 使用 DataManager 和 WebApiAdaptor 绑定远程数据
• 映射 fields（text、value、groupBy）
• 使用 query 属性筛选或限制数据集
• OData、OData V4、Web API 适配器模式

筛选

📄 阅读： references/filtering.md

• 使用 allowFiltering 启用或禁用筛选
• 使用 filterType（StartsWith、EndsWith、Contains）更改筛选模式
• 使用 filtering 事件自定义筛选逻辑
• 在只读场景中禁用筛选

排序

📄 阅读： references/sorting.md

• 使用 allowSorting 启用排序
• 使用 sortOrder（None、Ascending、Descending）设置初始排序顺序
• 使用 sortType（OneColumn、MultipleColumns）对多个列排序
• 点击列标题切换排序方向

分组

📄 阅读： references/grouping.md

• 使用 fields.groupBy 对数据分组
• 在弹出窗口中固定分组标题
• 使用 groupTemplate 自定义分组标题

模板

📄 阅读： references/templates.md

• 使用 itemTemplate 自定义每一行
• 使用 headerTemplate（在 ColumnDirective 上）自定义列标题
• 使用 groupTemplate 自定义分组标题
• 使用 footerTemplate 设置弹出窗口页脚内容
• 使用 noRecordsTemplate 显示空状态
• 使用 actionFailureTemplate 显示远程获取失败状态

项目和配置

📄 阅读： references/items.md

• 使用 text、value、index 设置初始选择项
• 使用 placeholder 和 floatLabelType 设置输入标签行为
• 使用 showClearButton 允许清除选择项
• disabled 和 readonly 状态
• 使用 width、popupWidth、popupHeight 设置尺寸
• 使用 cssClass 自定义样式
• 使用 htmlAttributes 添加 HTML 属性
• 使用 gridSettings 设置网格线、行高和交替行
• 使用 query 限制数据
• addItems 方法、focusIn、focusOut、showPopup、hidePopup

虚拟化

📄 阅读： references/virtualization.md

• 为大型数据集启用 enableVirtualization
• 对本地和远程数据进行虚拟滚动
• 与 gridSettings.rowHeight 配合使用

事件

📄 阅读： references/events.md

• change — 值更改或选择项目时触发
• select — 选择项目时触发
• open / close — 弹出窗口打开/关闭生命周期事件
• filtering — 输入字符时触发，用于自定义筛选
• actionBegin / actionComplete / actionFailure — 数据获取生命周期事件

API 参考

📄 阅读： references/api.md

• 所有属性的完整列表，包含类型和默认值
• 所有事件及其参数类型
• 所有方法：addItems、focusIn、focusOut、getDataByValue、getItems、showPopup、hidePopup
• ColumnModel 属性
• GridSettingsModel 属性
• FieldSettingsModel 属性

无障碍

📄 阅读： references/accessibility.md

• 符合 WCAG 2.2 和 Section 508 标准
• WAI-ARIA 属性（role、aria-expanded、aria-selected 等）
• 键盘导航快捷键
• 使用 enableRtl 支持 RTL
• 屏幕阅读器支持

本地化

📄 阅读： references/localization.md

• 使用 L10n 本地化 noRecordsTemplate 文本
• 设置 locale 属性以进行特定区域设置的渲染
• 加载翻译对象

快速开始

import { MultiColumnComboBoxComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-multicolumn-combobox';
import * as React from 'react';
import './App.css';

// CSS in App.css:
// @import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
// @import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css";
// @import "../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css";
// @import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
// @import "../node_modules/@syncfusion/ej2-react-multicolumn-combobox/styles/tailwind3.css";

function App() {
  const empData = [
    { EmpID: 1001, Name: 'Andrew Fuller', Designation: 'Team Lead', Country: 'England' },
    { EmpID: 1002, Name: 'Robert', Designation: 'Developer', Country: 'USA' },
    { EmpID: 1003, Name: 'Michael', Designation: 'HR', Country: 'Russia' },
  ];
  const fields = { text: 'Name', value: 'EmpID' };

  return (
    <MultiColumnComboBoxComponent
      id="multicolumn"
      dataSource={empData}
      fields={fields}
      placeholder="Select an employee"
    >
      <ColumnsDirective>
        <ColumnDirective field='EmpID' header='Employee ID' width={120} />
        <ColumnDirective field='Name' header='Name' width={120} />
        <ColumnDirective field='Designation' header='Designation' width={120} />
        <ColumnDirective field='Country' header='Country' width={100} />
      </ColumnsDirective>
    </MultiColumnComboBoxComponent>
  );
}
export default App;

常见模式

按文本预选项目

<MultiColumnComboBoxComponent dataSource={empData} fields={fields} text="Michael">
  {/* columns */}
</MultiColumnComboBoxComponent>

启用 Contains 模式筛选

<MultiColumnComboBoxComponent
  dataSource={empData}
  fields={fields}
  allowFiltering={true}
  filterType="Contains"
>
  {/* columns */}
</MultiColumnComboBoxComponent>

启用降序排序并支持多列排序

import { SortOrder } from '@syncfusion/ej2-react-multicolumn-combobox';

<MultiColumnComboBoxComponent
  dataSource={empData}
  fields={fields}
  allowSorting={true}
  sortOrder={SortOrder.Descending}
  sortType="MultipleColumns"
>
  {/* columns */}
</MultiColumnComboBoxComponent>

处理值更改事件

<MultiColumnComboBoxComponent
  dataSource={empData}
  fields={fields}
  change={(args) => console.log('Selected:', args.value)}
>
  {/* columns */}
</MultiColumnComboBoxComponent>