syncfusion-angular-multi-select（syncfusion Angular multi select 搜索）

Implementing the Syncfusion Angular MultiSelect Dropdown

The MultiSelect Dropdown (ejs-multiselect) allows users to select one or more values from a predefined list. It supports four visual modes (Default/Box/Delimiter/CheckBox), rich filtering, templates, grouping, remote data, virtualization, and full Angular form integration.

Component Overview

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation and package setup (ng add)
• CSS imports and theme configuration
• Basic <ejs-multiselect> in standalone Angular component
• Popup height/width configuration
• Angular version notes (standalone default in Angular 19+)

Data Binding & Value Binding

📄 Read: references/data-binding.md

• Local arrays (strings, numbers, objects)
• fields mapping: text, value, groupBy, iconCss, disabled
• Remote data with DataManager (OData, Web API)
• Pre-selecting values programmatically
• Object binding with allowObjectBinding

Selection Modes, Chips & Item Control

📄 Read: references/selection-modes.md

• mode property: Default / Box / Delimiter / CheckBox
• CheckBox mode: CheckBoxSelection, showSelectAll, maximumSelectionLength
• Chip customization via tagging event
• Custom values with allowCustomValue
• Disabling specific items: fields.disabled, disableItem()
• addTagOnBlur and changeOnBlur behaviors

Filtering

📄 Read: references/filtering.md

• Enabling allowFiltering + filtering event + updateData()
• filterType: startsWith, contains, endsWith
• Minimum character threshold before query fires
• Remote filtering with DataManager
• Case-insensitive matching

Templates

📄 Read: references/templates.md

• itemTemplate — custom list item rendering with ng-template
• valueTemplate — customize chip/selected value display
• groupTemplate — custom group header content
• headerTemplate / footerTemplate — popup top/bottom
• noRecordsTemplate / actionFailureTemplate

Grouping & Cascading

📄 Read: references/grouping-and-items.md

• fields.groupBy — organize items into categories
• Fixed vs inline group headers
• enableGroupCheckBox for group-level Select All
• Cascading MultiSelect: parent change event → filter child data
• Country → State → City cascade pattern

Form Integration

📄 Read: references/form-support.md

• Template-driven forms: FormsModule, ngModel, two-way binding
• Reactive forms: ReactiveFormsModule, FormGroup, FormControl
• formControlName usage and validation
• Required field and custom validator patterns

Advanced Features

📄 Read: references/advanced-features.md

• Virtualization for large datasets (enableVirtualization)
• Popup resize (allowResize, resize events)
• Icons in list items (iconCss field)
• Localization (L10n.load(), locale key overrides)
• Accessibility: WAI-ARIA, keyboard navigation, WCAG 2.2
• RTL support

API Reference

📄 Read: references/api.md

• Complete list of all properties with types and defaults
• All public methods with signatures, parameters, and return types
• All events with argument types and usage examples
• Module injection notes (CheckBoxSelectionService)

Quick Start

ng add @syncfusion/ej2-angular-dropdowns

// app.component.ts — Standalone Angular 19+
import { Component } from '@angular/core';
import { MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns';

@Component({
  standalone: true,
  imports: [MultiSelectModule],
  selector: 'app-root',
  template: `
    <ejs-multiselect
      [dataSource]="skills"
      [fields]="fields"
      placeholder="Select skills"
      [(value)]="selectedSkills"
      (change)="onChange($event)">
    </ejs-multiselect>
  `
})
export class AppComponent {
  public skills = [
    { id: 1, name: 'Angular' },
    { id: 2, name: 'React' },
    { id: 3, name: 'TypeScript' },
    { id: 4, name: 'Node.js' },
  ];
  public fields = { text: 'name', value: 'id' };
  public selectedSkills: number[] = [1, 3]; // pre-select Angular & TypeScript

  onChange(args: any): void {
    console.log('Selected IDs:', args.value);
  }
}

/* styles.css */
@import '@syncfusion/ej2-base/styles/material3.css';
@import '@syncfusion/ej2-buttons/styles/material3.css';
@import '@syncfusion/ej2-inputs/styles/material3.css';
@import '@syncfusion/ej2-lists/styles/material3.css';
@import '@syncfusion/ej2-popups/styles/material3.css';
@import '@syncfusion/ej2-dropdowns/styles/material3.css';
@import '@syncfusion/ej2-angular-dropdowns/styles/material3.css';

Common Patterns

Checkbox Mode with Select All

import { MultiSelectModule, CheckBoxSelectionService } from '@syncfusion/ej2-angular-dropdowns';

@Component({
  standalone: true,
  imports: [MultiSelectModule],
  providers: [CheckBoxSelectionService],
  template: `
    <ejs-multiselect
      [dataSource]="items"
      mode="CheckBox"
      [showSelectAll]="true"
      selectAllText="Select All"
      unSelectAllText="Unselect All"
      [maximumSelectionLength]="5">
    </ejs-multiselect>
  `
})

Filtering with Remote Data

template: `
  <ejs-multiselect
    [dataSource]="data"
    [allowFiltering]="true"
    filterType="contains"
    (filtering)="onFilter($event)">
  </ejs-multiselect>
`

onFilter(args: FilteringEventArgs): void {
  const query = new Query().where('name', 'contains', args.text, true);
  args.updateData(this.data, query);
}

Reactive Form Integration

import { ReactiveFormsModule, FormControl } from '@angular/forms';

// In component:
public skillsControl = new FormControl([1, 3]); // pre-selected IDs

// In template:
// <ejs-multiselect [formControl]="skillsControl" [dataSource]="skills" [fields]="fields">
// </ejs-multiselect>

Key Props