syncfusion-javascript-dropdowns

Name: syncfusion-javascript-dropdowns
Author: syncfusion

github.com/syncfusion開発073 回インストール1 週間前に更新

syncfusion-javascript-dropdowns について

Syncfusion の TypeScript コンポーネント DropDownList と MultiSelect を使うためのスキルです。データバインディング、検索、カスタマイズ、連動選択、アクセシビリティを扱い、フォーム UI の実装に役立ちます。

主な機能

01単一・複数選択ドロップダウン
02ローカル・リモートデータ連携
03検索・グループ化・並べ替え
04項目・グループのテンプレート
05仮想スクロールと連動選択
06キーボード操作とアクセシビリティ

活用シーン

01検索可能な単一選択リストの構築
02チェックボックス式複数選択の提供
03親の選択に応じた子リストの更新
04大規模データのドロップダウン選択

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/syncfusion/javascript-ui-controls-skills --skill syncfusion-javascript-dropdowns

インストール後、Claude Code で/syncfusion-javascript-dropdownsを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/

autocomplete-api.md

autocomplete-customization.md

autocomplete-data-binding.md

autocomplete-filtering.md

autocomplete-getting-started.md

autocomplete-highlight-and-suggestions.md

autocomplete-virtualization.md

combobox-api.md

combobox-custom-values.md

combobox-customization.md

combobox-data-binding.md

combobox-filtering.md

combobox-getting-started.md

combobox-virtualization.md

dropdownlist-api.md

dropdownlist-cascading.md

dropdownlist-data-binding.md

dropdownlist-events-and-methods.md

dropdownlist-features.md

dropdownlist-filtering.md

dropdownlist-getting-started.md

dropdownlist-grouping.md

dropdownlist-style-and-accessibility.md

dropdownlist-templates.md

listbox-accessibility.md

listbox-api.md

listbox-data-binding.md

listbox-dual-list-box.md

listbox-features.md

listbox-getting-started.md

詳細

Syncfusion javascript ドロップダウン

DropDownList

Syncfusion の DropDownList コンポーネントは、ローカル／リモートデータのバインド、フィルタリング、グループ化、カスタムテンプレート、仮想スクロール、アクセシビリティ、カスケードパターンに対応した単一選択のドロップダウンを TypeScript で提供します。

ドキュメントとナビゲーションガイド

はじめに

📄 読む: references/dropdownlist-getting-started.md

インストールとパッケージの依存関係
input、select、UL タグでの DropDownList の初期化
シンプルなデータ配列のバインド
ポップアップの高さと幅の設定
appendTo を使用した初回レンダリング

データバインド

📄 読む: references/dropdownlist-data-binding.md

文字列配列、JSON オブジェクト、複雑なネストデータのバインド
fields を使用した text、value、iconCss、groupBy、disabled 列のマッピング
DataManager によるリモートデータ（OData、ODataV4 アダプター）
query を使用したリモートデータのフィルタリング／並べ替え
プリミティブ値とオブジェクト値のバインド（allowObjectBinding）

フィルタリング

📄 読む: references/dropdownlist-filtering.md

allowFiltering とフィルターバーの有効化
updateData を使用した filtering イベントの処理
フィルターの種類：startsWith、endsWith、contains
最小文字数制限、大文字と小文字を区別したフィルタリング、発音区別符号（ignoreAccent）
パフォーマンス向上のための debounceDelay
highlightSearch による一致文字の強調表示
検索結果数の制限

グループ化

📄 読む: references/dropdownlist-grouping.md

カテゴリー別グループ化のための groupBy フィールドのマッピング
インラインおよび固定グループヘッダー
<optgroup> に対応した HTML <select>
groupTemplate によるグループヘッダーのカスタマイズ
CSS による固定グループヘッダーの無効化

テンプレート

📄 読む: references/dropdownlist-templates.md

itemTemplate — 各リスト項目をカスタマイズします
valueTemplate — 選択した値の表示をカスタマイズします
groupTemplate — グループヘッダーをカスタマイズします
headerTemplate と footerTemplate — ポップアップの静的なヘッダー／フッター
noRecordsTemplate と actionFailureTemplate

機能と設定

📄 読む: references/dropdownlist-features.md

fields.disabled と disableItem メソッドによる項目の無効化
showClearButton またはプログラムによる選択のクリア
allowResize によるポップアップのサイズ変更
大規模なデータセット向けの enableVirtualization による仮想スクロール
インクリメンタル検索（組み込み）
floatLabelType、enabled、readonly、sortOrder
htmlAttributes、cssClass、width、zIndex

イベントとメソッド

📄 読む: references/dropdownlist-events-and-methods.md

isInteracted フラグを含む change イベント
open、close、beforeOpen、select、dataBound イベント
リモートデータ向けの actionBegin、actionComplete、actionFailure
filtering、focus、blur イベント
showPopup、hidePopup、addItem、getItems、getDataByValue
dataBind、clear、refresh、destroy、focusIn、focusOut

カスケード DropDownList

📄 読む: references/dropdownlist-cascading.md

国 → 州 → 都市のカスケードパターン
change イベントと Query を使用した子ドロップダウンデータのフィルタリング
プロパティの変更後に dataBind を呼び出す
カスケードドロップダウンで項目を事前選択する

スタイルとアクセシビリティ

📄 読む: references/dropdownlist-style-and-accessibility.md

ラッパー、アイコン、フォーカス、ホバー、ポップアップのカスタマイズ向け CSS クラス
アスタリスク付きフロートラベル
WAI-ARIA のロールと属性
キーボードショートカットの完全なリファレンス
enableRtl による RTL 対応
L10n によるローカライズ

API リファレンス

📄 参照： references/dropdownlist-api.md

型とデフォルト値を含むすべてのプロパティ
パラメーターと戻り値の型を含むすべてのメソッド
説明を含むすべてのイベント
FieldSettingsModel リファレンス

インストール

npm install @syncfusion/ej2-dropdowns
npm audit

クイックスタート

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

// Simple string array
let dropDownListObject: DropDownList = new DropDownList({
    dataSource: ['Badminton', 'Cricket', 'Football', 'Golf', 'Tennis'],
    placeholder: 'Select a game'
});
dropDownListObject.appendTo('#ddlelement');


<input type="text" id="ddlelement" />

よく使われるパターン

フィールドマッピングを使用した JSON データ

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

let sportsData: { [key: string]: Object }[] = [
    { Id: 'game1', Game: 'Badminton' },
    { Id: 'game2', Game: 'Football' },
    { Id: 'game3', Game: 'Tennis' }
];

let ddl: DropDownList = new DropDownList({
    dataSource: sportsData,
    fields: { text: 'Game', value: 'Id' },
    placeholder: 'Select a game'
});
ddl.appendTo('#ddlelement');

OData を使用したリモートデータ

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

let ddl: DropDownList = new DropDownList({
    dataSource: new DataManager({
        url: 'url', // Replace with your trusted API endpoint
        adaptor: new ODataV4Adaptor,
        crossDomain: true  // Enable only when the API origin differs from your app; use only with trusted endpoints
    }),
    query: new Query().from('Customers').select(['ContactName', 'CustomerID']).take(6),
    fields: { text: 'ContactName', value: 'CustomerID' },
    placeholder: 'Select a customer',
    sortOrder: 'Ascending'
});
ddl.appendTo('#ddlelement');

検索ボックスを使用したフィルタリング

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

let ddl: DropDownList = new DropDownList({
    dataSource: searchData,
    fields: { text: 'Country', value: 'Index' },
    allowFiltering: true,
    placeholder: 'Select a country',
    filtering: (e: FilteringEventArgs) => {
        let query = new Query();
        query = e.text !== '' ? query.where('Country', 'startswith', e.text, true) : query;
        e.updateData(searchData, query);
    }
});
ddl.appendTo('#ddlelement');

値変更の処理

let ddl: DropDownList = new DropDownList({
    dataSource: sportsData,
    fields: { text: 'Game', value: 'Id' },
    placeholder: 'Select a game',
    change: (args) => {
        if (args.isInteracted) {
            console.log('User selected:', args.value);
        } else {
            console.log('Programmatic change:', args.value);
        }
    }
});

主なプロパティ一覧

プロパティ	型	目的
`dataSource`	array \| DataManager	リストに表示するデータ
`fields`	FieldSettingsModel	text、value、groupBy、iconCss、disabled をマッピングします
`value`	string \| number \| boolean \| object	選択した値
`text`	string	選択した項目の表示テキスト
`index`	number	選択した項目のインデックス
`placeholder`	string	入力欄のプレースホルダーテキスト
`allowFiltering`	boolean	フィルターバーを表示します
`enableVirtualization`	boolean	大規模なリストで仮想スクロールを有効にします
`sortOrder`	'None' \| 'Ascending' \| 'Descending'	リスト項目を並べ替えます
`showClearButton`	boolean	クリアボタン（×）を表示します
`enabled`	boolean	コンポーネントを有効／無効にします
`readonly`	boolean	ユーザー操作を禁止します
`popupHeight`	string \| number	ポップアップの高さ（デフォルトは 300px）
`popupWidth`	string \| number	ポップアップの幅（デフォルトは 100%）

MultiSelect

Syncfusion TypeScript MultiSelect コンポーネントは、リストから 1 つまたは複数の値を選択できる、多機能なドロップダウンです。データバインディング、フィルタリング、グループ化、カスケード、カスタムテンプレート、包括的なアクセシビリティ機能に対応しています。

ドキュメントのナビゲーションガイド

はじめに

📄 参照： references/multiselect-getting-started.md

インストールとパッケージのセットアップ
CSS のインポートとテーマの設定
要素の初期化（SELECT、UL、INPUT タグ）
データを使用した基本的なコンポーネントのセットアップ

データバインディングとデータソース

📄 参照： references/multiselect-data-binding.md

ローカルのデータ配列（文字列とオブジェクト）のバインド
リモートデータソースへの接続
アダプターを使用した DataManager の設定
フィールドマッピングとデータ形式の仕様

選択モードと値

📄 参照： references/multiselect-selection-modes.md

単一選択モードと複数選択モード
value プロパティ（選択した値の配列）の使用
プログラムによる選択値の取得／設定
選択変更イベントとハンドラー

チェックボックスと複数選択機能

📄 参照： references/multiselect-checkbox-multiselect.md

視覚的な複数選択を可能にするチェックボックスモードの有効化
すべて選択／すべて選択解除の機能
区切り文字モードと視覚的なチップ表示
チェックボックスの外観のカスタマイズ

フィルタリングと検索

📄 参照： references/multiselect-filtering-search.md

リアルタイムフィルタリングの有効化
カスタムフィルターロジックと式
検索前の最小文字数の検証
大文字と小文字を区別するフィルタリングと区別しないフィルタリング

グループ化と並べ替え

📄 参照： references/multiselect-grouping-sorting.md

カテゴリーフィールドによる項目のグループ化
昇順／降順での並べ替え
カスタムグループテンプレート
階層型データのグループ化

カスケードドロップダウン

📄 参照： references/multiselect-cascading-dropdowns.md

2 階層および複数階層のカスケード
親子データの同期処理
カスケードを使用したリモートデータの読み込み
親ドロップダウンの変更時に子ドロップダウンをリセットする処理

カスタマイズとテンプレート

📄 参照： references/multiselect-customization-templates.md

リスト項目の項目テンプレート
表示領域の値テンプレート
グループ化された項目のグループテンプレート
ヘッダーとフッターのテンプレート
CSS のカスタマイズとスタイル設定

パフォーマンス：仮想スクロール

📄 参照： references/multiselect-virtual-scrolling.md

大規模なデータセットで仮想スクロールを有効にする
パフォーマンス最適化の手法
フィルタリングとグループ化を用いた仮想スクロール
メモリとレンダリングに関する考慮事項

アクセシビリティと標準規格

📄 参照： references/multiselect-accessibility.md

WCAG 2.2 への準拠と標準規格
キーボードナビゲーション（矢印キー、Tab、Enter、Escape）
ARIA 属性とロール
スクリーンリーダーのサポートとフォーカス管理

ハウツーとトラブルシューティング

📄 参照： references/multiselect-how-to-guide.md

一般的な実装パターンとレシピ
エッジケースと回避策
パフォーマンスのヒントとベストプラクティス
よくある問題のトラブルシューティング

API リファレンス

📄 参照： references/multiselect-api.md

型とデフォルト値を含む、すべてのプロパティの完全な一覧
パラメーターシグネチャと戻り値の型を含む、すべてのパブリックメソッド
引数の型と使用方法を含む、すべてのイベント
FieldSettingsModel のフィールドマッピングリファレンス
イベント引数の型定義（MultiSelectChangeEventArgs、SelectEventArgs、RemoveEventArgs、TaggingEventArgs、FilteringEventArgs など）
CheckBoxSelection と VirtualScroll のモジュール注入ガイド

クイックスタートの例

基本設定

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

// Initialize with simple string data
const multiSelect = new MultiSelect({
  dataSource: ['Apple', 'Banana', 'Orange', 'Mango'],
  placeholder: 'Select fruits'
});

multiSelect.appendTo('#select');

チェックボックス付きの複数選択

import { MultiSelect, CheckBoxSelection } from '@syncfusion/ej2-dropdowns';

MultiSelect.Inject(CheckBoxSelection);

const multiSelect = new MultiSelect({
  dataSource: [
    { id: '1', name: 'Apple' },
    { id: '2', name: 'Banana' },
    { id: '3', name: 'Orange' }
  ],
  fields: { text: 'name', value: 'id' },
  mode: 'CheckBox',
  showSelectAll: true,
  placeholder: 'Select fruits'
});

multiSelect.appendTo('#select');

フィルタリングを使用する場合

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

const data = [
  { id: '1', city: 'New York' },
  { id: '2', city: 'Los Angeles' },
  { id: '3', city: 'Chicago' }
];

const multiSelect = new MultiSelect({
  dataSource: data,
  fields: { text: 'city', value: 'id' },
  allowFiltering: true,
  filtering: (e: FilteringEventArgs) => {
    const query = new Query();
    if (e.text !== '') {
      query.where('city', 'startswith', e.text, true);
    }
    e.updateData(data, query);
  },
  placeholder: 'Search cities'
});

multiSelect.appendTo('#select');

一般的なパターン

パターン 1：連動するドロップダウン

// Country dropdown
const countrySelect = new MultiSelect({
  dataSource: countries,
  fields: { text: 'name', value: 'id' },
  change: () => {
    const selectedCountry = countrySelect.value;
    // Update state dropdown based on selected country
    stateSelect.dataSource = states.filter(s => s.countryId === selectedCountry);
    stateSelect.refresh();
  }
});

countrySelect.appendTo('#country');

パターン 2：リモートデータバインディング

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

const multiSelect = new MultiSelect({
  dataSource: new DataManager({
    url: 'url', // Replace with your trusted API endpoint
    adaptor: new ODataV4Adaptor(),
    crossDomain: true  // Enable only when the API origin differs from your app; use only with trusted endpoints
  }),
  query: new Query().select(['ContactName', 'CustomerID']).take(10),
  fields: { text: 'ContactName', value: 'CustomerID' },
  placeholder: 'Select customer'
});

multiSelect.appendTo('#select');

パターン 3：カスタム項目テンプレート

⚠️ セキュリティに関する注意： テンプレート文字列では ${field} による補間を使用します。フィールド値がユーザー入力やリモートソースに由来する場合は、XSS インジェクションを防ぐため、バインドする前にサニタイズまたはエンコードしてください。

const multiSelect = new MultiSelect({
  dataSource: employees,
  fields: { text: 'firstName', value: 'id' },
  itemTemplate: '<div><span>${firstName}</span><span>${department}</span></div>',
  valueTemplate: '<span>${firstName} - ${department}</span>',
  placeholder: 'Select employee'
});

multiSelect.appendTo('#select');

主要なプロパティのクイックリファレンス

プロパティ	型	デフォルト値	目的
`dataSource`	`array \| DataManager`	`[]`	コンポーネントにデータをバインドします
`fields`	`FieldSettingsModel`	`{}`	データフィールド（text、value、groupBy、iconCss）をマッピングします
`value`	`string[] \| number[] \| boolean[] \| object[]`	`null`	選択した値を取得／設定します
`mode`	`'Box' \| 'Delimiter' \| 'Default' \| 'CheckBox'`	`'Default'`	選択項目の表示モードです
`allowFiltering`	`boolean`	`null`	検索／フィルター機能を有効にします
`enableVirtualization`	`boolean`	`false`	パフォーマンス向上のため仮想スクロールを有効にします
`itemTemplate`	`string \| Function`	`null`	リスト項目のカスタム HTML です
`valueTemplate`	`string \| Function`	`null`	選択項目の表示用カスタム HTML です
`placeholder`	`string`	`null`	入力欄のプレースホルダーテキストです
`showSelectAll`	`boolean`	`false`	CheckBox モードで「すべて選択」オプションを表示します
`enableGroupCheckBox`	`boolean`	`false`	CheckBox モードでグループヘッダーのチェックボックスを有効にします
`maximumSelectionLength`	`number`	`1000`	選択可能な項目数を制限します
`allowCustomValue`	`boolean`	`false`	リストにない値の入力を許可します
`closePopupOnSelect`	`boolean`	`true`	選択するたびにポップアップを開いたままにします
`hideSelectedItem`	`boolean`	`true`	ドロップダウンリストから選択済み項目を非表示にします
`delimiterChar`	`string`	`','`	Delimiter モードで使用する区切り文字です
`showClearButton`	`boolean`	`true`	各チップに削除アイコンを表示します
`showDropDownIcon`	`boolean`	`false`	ドロップダウン矢印ボタンを表示します
`enabled`	`boolean`	`true`	コンポーネントを有効／無効にします
`readonly`	`boolean`	`false`	コンポーネントを読み取り専用にします
`zIndex`	`number`	`1000`	ポップアップ要素の z-index です

📘 すべてのプロパティ、メソッド、イベントを含む完全な API については、references/multiselect-api.md をご覧ください。

AutoComplete

AutoComplete コンポーネントは、ユーザーが入力欄に入力すると、一致する候補リストを表示します。ComboBox を拡張し、フィルタリングを優先する動作を備えています。デフォルトでは、フォーカス時ではなく、ユーザーが入力したときにのみポップアップが開きます。

主な機能：

StartsWith、EndsWith、または Contains（デフォルト）で候補をフィルタリングします
ローカル配列（文字列、数値、オブジェクト）またはリモートの DataManager ソースをバインドします
候補リスト内で一致した文字を強調表示します
フィルタリング開始までに必要な最小文字数を制御します（minLength）
filtering イベントを使用してフィルタリングロジックを処理または上書きします
showPopup()／hidePopup() でポップアップをプログラムから開閉します
フローティングラベルに対応し、アクセシビリティとキーボード操作を完全にサポートします

ナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

インストールとパッケージの設定
HTML 要素の設定（<input>）
new AutoComplete() による基本的なインスタンス化
appendTo() による DOM へのバインド
CSS とテーマのインポート
最小限の動作例

フィルタリングの設定

📄 参照： references/filtering.md

filterType：StartsWith、EndsWith、Contains
minLength：フィルター実行までに必要な最小文字数
ignoreCase：大文字と小文字を区別する検索と区別しない検索
filtering イベント：updateData() を使用したカスタムフィルタリングロジック
filter() メソッド：プログラムによるフィルタリング
DataManager を使用したリモートデータのフィルタリング

データバインディング

📄 参照: references/data-binding.md

ローカルの文字列、数値、オブジェクトの配列
fields マッピング：text、value、iconCss、groupBy
DataManager を使用する query プロパティ
カスタム HTML 属性用の htmlAttributes
リモートデータソースのパターン

ハイライトと候補の制御

📄 参照: references/highlight-and-suggestions.md

highlight：一致する文字を視覚的に強調表示します
suggestionCount：ポップアップリストの項目数を制限します
showPopupButton：ポップアップを開くボタンの表示を切り替えます
showPopup() / hidePopup()：ポップアップをプログラムから制御します

カスタマイズとアクセシビリティ

📄 参照: references/customization.md

floatLabelType：Never、Always、Auto
CSS クラスのオーバーライドとテーマ設定
キーボード操作と ARIA のサポート
無効状態
RTL のサポート

仮想化

📄 参照: references/virtualization.md

AutoComplete.Inject(VirtualScroll) — モジュールのインジェクションが必要です
enableVirtualization: true — 仮想スクロールを有効にします
大規模な配列データのローカル仮想化
DataManager を使用したリモートデータの仮想化
query.take() によるバッチサイズのカスタマイズ
仮想化を使用したグループ化

API リファレンス全文

📄 参照: references/api.md

37 個すべてのプロパティについて、型、デフォルト値、TypeScript の例を記載しています
19 個すべてのメソッドについて、完全なシグネチャ、パラメーター、戻り値の型を記載しています
18 個すべてのイベントについて、イベント引数の詳細と使用例を記載しています
対象：actionFailureTemplate、allowCustom、allowObjectBinding、allowResize、autofill、cssClass、dataSource、debounceDelay、enablePersistence、enableRtl、enableVirtualization、enabled、fields、filterType、floatLabelType、footerTemplate、groupTemplate、headerTemplate、highlight、htmlAttributes、ignoreAccent、ignoreCase、isDeviceFullScreen、itemTemplate、locale、minLength、noRecordsTemplate、placeholder、popupHeight、popupWidth、query、readonly、showClearButton、showPopupButton、sortOrder、suggestionCount、value、width、zIndex
特定のプロパティ、メソッド、イベント名を調べる場合に使用してください

クイックスタート


<input id="atc" type="text" />

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

// Local string array
const sports: string[] = ['Badminton', 'Basketball', 'Cricket', 'Football', 'Hockey', 'Tennis'];

const atcObj: AutoComplete = new AutoComplete({
  dataSource: sports,
  placeholder: 'Find a sport'
});

atcObj.appendTo('#atc');

/* Import a built-in theme */
@import '../node_modules/@syncfusion/ej2/material.css';

任意の文字を入力すると、一致する項目が候補ポップアップに表示されます。Enter キーを押すか、候補をクリックして選択してください。

よくあるパターン

Contains ではなく StartsWith でフィルタリングする

const atcObj: AutoComplete = new AutoComplete({
  dataSource: sports,
  filterType: 'StartsWith',
  placeholder: 'Search'
});
atcObj.appendTo('#atc');

フィールドマッピングを使ったオブジェクトデータ

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

const employees: { [key: string]: Object }[] = [
  { id: 1, name: 'Alice', dept: 'Engineering' },
  { id: 2, name: 'Bob',   dept: 'Design' },
  { id: 3, name: 'Carol', dept: 'Engineering' }
];

const atcObj: AutoComplete = new AutoComplete({
  dataSource: employees,
  fields: { value: 'id', text: 'name', groupBy: 'dept' },
  placeholder: 'Find employee'
});
atcObj.appendTo('#atc');

イベントによるカスタムフィルタリング

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

const atcObj: AutoComplete = new AutoComplete({
  dataSource: sports,
  filtering: (e: FilteringEventArgs) => {
    let query: Query = new Query().where('', 'startswith', e.text, true);
    e.updateData(sports, query);
  }
});
atcObj.appendTo('#atc');

一致したテキストを強調表示し、候補数を制限する

const atcObj: AutoComplete = new AutoComplete({
  dataSource: sports,
  highlight: true,
  suggestionCount: 5,
  placeholder: 'Search (max 5 results)'
});
atcObj.appendTo('#atc');

主なプロパティ

プロパティ	型	デフォルト	用途
`dataSource`	`Object[] \| DataManager \| string[]`	`[]`	検索するデータ
`fields`	`FieldSettingsModel`	`{ value: null, iconCss: null, groupBy: null }`	オブジェクトのキーを表示値／値にマッピングします
`filterType`	`FilterType`	`'Contains'`	入力をデータと照合する方法
`minLength`	`number`	`1`	フィルタリングが実行されるまでに入力する最小文字数
`ignoreCase`	`boolean`	`true`	大文字と小文字を区別せずに照合します
`ignoreAccent`	`boolean`	`false`	フィルタリング時に発音区別符号やアクセント記号を無視します
`highlight`	`boolean`	`false`	ポップアップ内で一致した文字を強調表示します
`suggestionCount`	`number`	`20`	ポップアップに表示する項目の最大数
`autofill`	`boolean`	`false`	最初に一致した項目をインラインで自動入力します
`allowCustom`	`boolean`	`true`	データソースにない値を許可します
`allowObjectBinding`	`boolean`	`false`	選択時にオブジェクト全体を `value` として返します
`allowResize`	`boolean`	`false`	ポップアップにサイズ変更ハンドルを表示します
`showPopupButton`	`boolean`	`false`	ドロップダウン矢印ボタンを表示します
`showClearButton`	`boolean`	`true`	✕ のクリアボタンを表示します
`floatLabelType`	`FloatLabelType`	`'Never'`	ラベルのフロート動作
`htmlAttributes`	`{ [key: string]: string }`	`{}`	入力欄に追加する HTML 属性
`query`	`Query`	`null`	DataManager 用のカスタムクエリ
`debounceDelay`	`number`	`300`	キーストローク後、フィルタリングが実行されるまでの遅延時間（ms）
`sortOrder`	`SortOrder`	`null`	ポップアップリストの並べ替え順：`None`、`Ascending`、`Descending`
`enableVirtualization`	`boolean`	`false`	大規模なデータセットで仮想スクロールを有効にします
`isDeviceFullScreen`	`boolean`	`true`	モバイルでのフィルタリング時にポップアップを全画面表示します
`enablePersistence`	`boolean`	`false`	ページの再読み込み後も `value` を保持します
`enableRtl`	`boolean`	`false`	右から左への表示を有効にします
`popupHeight`	`string \| number`	`'300px'`	候補ポップアップの高さ
`popupWidth`	`string \| number`	`'100%'`	候補ポップアップの幅
`zIndex`	`number`	`1000`	ポップアップ要素の Z-index

主なイベント：

イベント	発生するタイミング
`filtering`	キーストロークごと。カスタム結果を渡すには `e.updateData()` を使用します
`change`	選択またはユーザー入力によって値が変更されたとき
`select`	ユーザーがポップアップから項目を選択したとき
`open` / `close`	ポップアップが開いたとき、または閉じたとき
`beforeOpen`	ポップアップが開く直前
`focus` / `blur`	コンポーネントがフォーカスを取得、または失ったとき
`dataBound`	ポップアップにデータソースが設定されたとき
`actionBegin` / `actionComplete` / `actionFailure`	リモートデータ取得のライフサイクル
`customValueSpecifier`	ユーザーがデータソースにない値を入力したとき（`allowCustom: true`）
`resizeStart` / `resizing` / `resizeStop`	ポップアップのサイズ変更ライフサイクル（`allowResize: true`）
`created` / `destroyed`	コンポーネントの作成時と破棄時

主なメソッド： showPopup()、hidePopup()、filter(dataSource, query?, fields?)、clear()、addItem()、disableItem()、getDataByValue()、getItems()、focusIn()、focusOut()、showSpinner()、hideSpinner()、refresh()、destroy()。

ComboBox

ComboBox コンポーネントでは、ユーザーは入力欄に値を直接入力するか、あらかじめ定義された選択肢のドロップダウンリストから項目を選択できます。通常のテキスト入力と厳密な DropDownList の中間にあたる柔軟なコンポーネントです。allowCustom が false に設定されていない限り、既存の項目を選ぶよう強制されることはありません。

DropDownList との主な違い：

ユーザーは自由に入力でき、デフォルトでカスタム値が受け入れられます（allowCustom: true）
autofill により、入力中に最初に一致した項目がインラインで候補として表示されます
customValueSpecifier イベントを使って、ユーザーが入力したカスタム値の書式設定や変換ができます
インライン検索機能による allowFiltering に対応しています（独立したフィルターバーはありません）

コンポーネントの概要

機能	ComboBox の動作
ユーザー入力	編集可能 — ユーザーは入力フィールドに直接入力します
カスタム値	デフォルトで許可されています（`allowCustom: true`）
インライン候補	`autofill: true` で任意に有効化できます
フィルタリング	`allowFiltering: true` と `filtering` イベントで任意に有効化できます
仮想化	`ComboBox.Inject(VirtualScroll)` でサポートされています
データバインディング	ローカル配列、オブジェクト配列、DataManager（リモート）
オブジェクトバインディング	`allowObjectBinding: true` でオブジェクト全体を値としてバインドできます

ドキュメントとナビゲーションガイド

はじめに

📄 参照: references/getting-started.md

インストールとパッケージのセットアップ
CSS／テーマのインポート
HTML 要素のセットアップ（<select> または <input>）
new ComboBox({}).appendTo('#id') による基本的なインスタンス化
value、text、index の初期化
showClearButton、placeholder、width
コンポーネントの破棄

データバインディング

📄 参照: references/data-binding.md

ローカルの文字列配列
fields マッピング（text、value、groupBy）を使用したローカルのオブジェクト配列
入力要素をカスタマイズする htmlAttributes
DataManager を使用したリモートデータ
カスタムデータクエリ用の query プロパティ
オブジェクト全体を値としてバインドする allowObjectBinding

フィルタリング

📄 参照: references/filtering.md

allowFiltering: true による検索の有効化
filtering イベントと FilteringEventArgs の使用方法
ローカルおよびリモートのカスタムフィルタリングに使用する filter() メソッド
モバイルでの isDeviceFullScreen の動作
該当なしテンプレートの処理

カスタム値

📄 参照: references/custom-values.md

allowCustom: true/false — 入力された値を受け付けるかどうかを制御します
autofill — ユーザーの入力に応じたインライン候補
入力されたカスタム値の書式を設定する customValueSpecifier イベント
CustomValueSpecifierEventArgs インターフェイス（text、item）
clear() と showClearButton によるカスタム値のクリア
カスタム値と組み合わせた allowObjectBinding

カスタマイズ

📄 参照: references/customization.md

floatLabelType：Never／Always／Auto
カスタムスタイル設定用の cssClass
ポップアップのヘッダーとフッター用の headerTemplate／footerTemplate
placeholder、width、popupHeight、popupWidth
readonly モード
ポップアップの制御：showPopup()／hidePopup()
フォーカスの制御：focusIn()／focusOut()
スピナー：showSpinner()／hideSpinner()

仮想化

📄 参照: references/virtualization.md

⚠️ 必須のモジュール注入：ComboBox.Inject(VirtualScroll)
大規模なデータセット向けの enableVirtualization: true
ローカルデータの仮想化
リモート DataManager の仮想化
allowCustom および allowFiltering との連携

API リファレンス全体

📄 参照: references/api.md

型、デフォルト値、例を含む、公開プロパティ全 37 件
引数インターフェイスを含むイベント 18 件
シグネチャと使用方法を含むメソッド 19 件
CustomValueSpecifierEventArgs インターフェイス

クイックスタート

import { ComboBox } from '@syncfusion/ej2-dropdowns';
import '@syncfusion/ej2-base/styles/material.css';
import '@syncfusion/ej2-inputs/styles/material.css';
import '@syncfusion/ej2-popups/styles/material.css';
import '@syncfusion/ej2-dropdowns/styles/material.css';

const sportsData: string[] = ['Badminton', 'Basketball', 'Cricket', 'Football', 'Tennis'];

const comboBox: ComboBox = new ComboBox({
  dataSource: sportsData,
  placeholder: 'Select or type a sport',
  allowCustom: true
});
comboBox.appendTo('#combo-element');

<input id="combo-element" />

よく使われるパターン

既存の値のみを許可する

const comboBox: ComboBox = new ComboBox({
  dataSource: sportsData,
  allowCustom: false,        // reject values not in the list
  placeholder: 'Select a sport'
});
comboBox.appendTo('#combo-element');

インラインの自動入力候補

const comboBox: ComboBox = new ComboBox({
  dataSource: sportsData,
  autofill: true,            // suggests first match inline as user types
  placeholder: 'Start typing...'
});
comboBox.appendTo('#combo-element');

リモートデータのフィルタリング

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

const comboBox: ComboBox = new ComboBox({
  dataSource: new DataManager({ url: 'url', adaptor: new ODataV4Adaptor() }),
  fields: { text: 'ContactName', value: 'CustomerID' },
  allowFiltering: true,
  filtering: (args: FilteringEventArgs) => {
    const query = new Query().select(['ContactName', 'CustomerID']).take(6);
    args.updateData(comboBox.dataSource as DataManager, query);
  },
  placeholder: 'Search customers'
});
comboBox.appendTo('#combo-element');

カスタム値の書式設定

import { ComboBox, CustomValueSpecifierEventArgs } from '@syncfusion/ej2-dropdowns';

const comboBox: ComboBox = new ComboBox({
  dataSource: [{ text: 'Cricket', id: '1' }],
  fields: { text: 'text', value: 'id' },
  allowCustom: true,
  customValueSpecifier: (args: CustomValueSpecifierEventArgs) => {
    args.item = { text: args.text, id: args.text.toLowerCase() };
  }
});
comboBox.appendTo('#combo-element');

主なプロパティ

プロパティ	型	デフォルト	目的
`dataSource`	`Object[] \| DataManager \| string[]`	`[]`	ドロップダウンリストのデータ
`fields`	`FieldSettingsModel`	`{}`	`text`、`value`、`groupBy` キーを対応付けます
`value`	`number \| string \| boolean \| object \| null`	`null`	選択した値
`text`	`string \| null`	`null`	選択した項目の表示テキスト
`index`	`number \| null`	`null`	選択した項目のインデックス
`allowCustom`	`boolean`	`true`	リストにない値のユーザー入力を許可します
`autofill`	`boolean`	`false`	入力中にインライン候補を表示します
`allowFiltering`	`boolean`	`false`	ポップアップに検索ボックスを表示します
`showClearButton`	`boolean`	`true`	選択を解除する ✕ ボタンを表示します
`placeholder`	`string`	`null`	入力欄のプレースホルダーテキスト
`floatLabelType`	`FloatLabelType`	`'Never'`	フローティングラベルの動作
`readonly`	`boolean`	`false`	ユーザー操作を無効にします
`allowObjectBinding`	`boolean`	`false`	オブジェクト全体を値としてバインドします
`enableVirtualization`	`boolean`	`false`	仮想スクロールを有効にします ⚠️ `Inject` が必要です

メンション

Mention コンポーネントは、対象要素（textarea、input、または contenteditable の div）を監視し、設定したトリガー文字（デフォルトは @）をユーザーが入力すると候補ポップアップを開きます。ユーザーが項目を選択すると、スタイル付きのチップとして対象要素に挿入されます。

主な機能：

target を使って任意の <textarea>、<input>、または contenteditable 要素にアタッチできます
mentionChar でトリガー文字を設定できます（デフォルトは @）
ローカル配列（文字列、オブジェクト）またはリモートの DataManager ソースをバインドできます
StartsWith、EndsWith、または Contains（デフォルト）で候補をフィルタリングできます
highlight でポップアップ内の一致文字を強調表示できます
itemTemplate でポップアップ項目のレイアウトを、displayTemplate で挿入するチップをカスタマイズできます
minLength、requireLeadingSpace、debounceDelay でポップアップを開くタイミングを制御できます
イベントで選択、変更、フィルタリングを処理できます
search() でプログラムから検索を実行し、disableItem()／addItem() で項目を管理できます

ナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

インストールとパッケージのセットアップ
CSS とテーマのインポート
HTML 対象要素のセットアップ（textarea、input、contenteditable）
基本的なインスタンス化：new Mention({ target: '#myTextarea', dataSource: [...] })
appendTo() の使用方法
mentionChar — トリガー文字の設定
最小限の動作例

データバインディング

📄 参照： references/data-binding.md

ローカルの文字列配列と数値配列
fields のマッピング（text、value、iconCss、groupBy）を使ったオブジェクト配列
actionBegin／actionComplete／actionFailure イベントを使ったリモートの DataManager
カスタムデータクエリ用の query プロパティ
sortOrder：None／Ascending／Descending
リモートエラー処理用の actionFailureTemplate

フィルタリング

📄 参照： references/filtering.md

filterType：StartsWith、EndsWith、Contains
minLength：ポップアップが表示されるまでの最小文字数
柔軟な照合のための ignoreCase と ignoreAccent
キーストロークによるフィルタリングのパフォーマンス調整用 debounceDelay
filtering イベントと FilteringEventArgs — updateData() を使ったカスタムフィルターロジック
リモートデータのフィルタリングパターン

ポップアップと表示

📄 参照： references/popup-and-display.md

target：textarea、input、または contenteditable へのバインド
requireLeadingSpace：@ の前にスペースを必須にします
allowSpaces：メンション検索内のスペースを許可します
popupWidth／popupHeight によるサイズ設定
showPopup()／hidePopup() によるプログラム制御
重なり順を設定する zIndex
noRecordsTemplate／spinnerTemplate
ポップアップのライフサイクルイベント：beforeOpen、opened、closed

テンプレートとカスタマイズ

📄 参照: references/templates-and-customization.md

itemTemplate：ポップアップ内の各候補項目をカスタマイズします
displayTemplate：挿入されるチップの HTML をカスタマイズします
groupTemplate：ポップアップ内のグループ見出しの表示をカスタマイズします
showMentionChar：挿入されるチップに @ を含めます
suffixText：挿入後にスペースまたは改行を追加します
highlight：候補内の一致した文字を太字にします
cssClass：コンポーネント単位のスタイル設定

イベントとメソッド

📄 参照: references/events-and-methods.md

select イベント（SelectEventArgs）：ユーザーが項目を選択したときに発生します
change イベント（MentionChangeEventArgs）：値、previousItem、element
filtering イベント：候補データを横取りして上書きします
search(text, x, y)：画面座標でプログラムから検索を開始します
disableItem(item)：特定のポップアップ項目を無効にします
addItem(items, index?)：候補リストに新しい項目を追加します
getItems() / getDataByValue(value)：リストの状態を照会します
created / destroyed ライフサイクルイベント

API リファレンス全文

📄 参照: references/api.md

型、デフォルト値、説明を含む、公開プロパティ全 30 件
- シグネチャ、パラメーター、戻り値の型を含む、メソッド全 15 件
- イベント引数インターフェイスの詳細を含む、イベント全 12 件
MentionChangeEventArgs インターフェイスのフィールド
特定のプロパティ、メソッド、イベントを調べる際に、このリファレンスを使用してください

クイックスタート


<textarea id="mentionTarget" rows="5" cols="40" placeholder="Type @ to mention someone"></textarea>
<div id="mention-default"></div>

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

const userData: { [key: string]: Object }[] = [
  { name: 'Alice',   id: 'alice' },
  { name: 'Bob',     id: 'bob'   },
  { name: 'Carol',   id: 'carol' },
  { name: 'David',   id: 'david' }
];

const mentionObj: Mention = new Mention({
  target: '#mentionTarget',
  dataSource: userData,
  fields: { text: 'name', value: 'id' }
});

mentionObj.appendTo('#mention-default');

/* Import a built-in theme */
@import '../node_modules/@syncfusion/ej2/material.css';

テキストエリアで @ を入力すると、候補のポップアップが開きます。さらに文字を入力して候補を絞り込みます。Enter、Tab を押すか、クリックすると、選択した項目がチップとして挿入されます。

よくあるパターン

トリガー文字のカスタマイズ

const mentionObj: Mention = new Mention({
  target: '#mentionTarget',
  dataSource: ['JavaScript', 'TypeScript', 'Python', 'Rust'],
  mentionChar: '#'   // use # as trigger instead of @
});
mentionObj.appendTo('#mention-default');

ポップアップが開く前に最小文字数を要求する

const mentionObj: Mention = new Mention({
  target: '#mentionTarget',
  dataSource: userData,
  fields: { text: 'name', value: 'id' },
  minLength: 2     // popup only appears after typing @ + 2 characters
});
mentionObj.appendTo('#mention-default');

一致したテキストを強調表示し、候補数を制限する

const mentionObj: Mention = new Mention({
  target: '#mentionTarget',
  dataSource: userData,
  fields: { text: 'name', value: 'id' },
  highlight: true,
  suggestionCount: 5
});
mentionObj.appendTo('#mention-default');

メンション検索でスペースを使用できるようにする

const mentionObj: Mention = new Mention({
  target: '#mentionTarget',
  dataSource: [
    { name: 'Alice Smith',  id: '1' },
    { name: 'Bob Jones',    id: '2' }
  ],
  fields: { text: 'name', value: 'id' },
  allowSpaces: true   // typing "@Alice Smith" still searches
});
mentionObj.appendTo('#mention-default');

挿入されるチップに @ 記号を表示する

const mentionObj: Mention = new Mention({
  target: '#mentionTarget',
  dataSource: userData,
  fields: { text: 'name', value: 'id' },
  showMentionChar: true,   // chip reads "@Alice" instead of "Alice"
  suffixText: ' '          // insert a space after the chip
});
mentionObj.appendTo('#mention-default');

主なプロパティ

プロパティ	型	デフォルト	目的
`target`	`HTMLElement \| string`	—	必須。トリガー文字を監視する要素
`dataSource`	`Object[] \| DataManager \| string[]`	`[]`	候補リストのデータ
`fields`	`FieldSettingsModel`	`{ text: null, value: null, iconCss: null, groupBy: null }`	オブジェクトのキーをマッピングします
`mentionChar`	`string`	`'@'`	ポップアップを開く文字
`minLength`	`number`	`0`	ポップアップ表示前に必要なトリガー後の最小文字数
`suggestionCount`	`number`	`25`	ポップアップに表示する最大項目数
`filterType`	`FilterType`	`'Contains'`	入力文字の照合方法
`ignoreCase`	`boolean`	`true`	大文字と小文字を区別しない照合
`highlight`	`boolean`	`false`	候補内の一致した文字を太字にします
`allowSpaces`	`boolean`	`false`	メンション検索文字列内のスペースを許可します
`requireLeadingSpace`	`boolean`	`true`	トリガーに `@` の前のスペースを必須にします
`showMentionChar`	`boolean`	`false`	挿入されるチップのテキストの前に `mentionChar` を付けます
`suffixText`	`string`	`null`	挿入されるチップの後に追加するテキスト（例：`' '`）
`debounceDelay`	`number`	`300`	フィルタリング前に待機するミリ秒数
`popupHeight`	`string \| number`	`'300px'`	ポップアップリストの高さ
`popupWidth`	`string \| number`	`'auto'`	ポップアップリストの幅

主なイベント： select（項目選択時）、change（エディター内の値更新時）、filtering（カスタムフィルターロジック）、beforeOpen / opened / closed（ポップアップのライフサイクル）。

主なメソッド： showPopup()、hidePopup()、search(text, x, y)、disableItem(item)、addItem(items, index?)、destroy()。

ListBox

Syncfusion の TypeScript ListBox コンポーネントは、ユーザーが 1 つまたは複数の値を選択できる、スクロール可能な項目リストを表示します。ドロップダウンとは異なり、常に表示されるため、利用可能な項目と選択済みの項目のリスト、権限の割り当てインターフェイス、設定パネルに最適です。ドラッグ＆ドロップ、ツールバーによる 2 つのリスト間の項目移動、フィルタリング、グループ化、並べ替え、チェックボックスによる選択に対応しています。

主な機能：

selectionSettings.mode による単一選択または複数選択
「すべて選択」機能を備えたチェックボックス選択 — ListBox.Inject(CheckBoxSelection) が必要です
allowDragAndDrop + scope による、単一リスト内または 2 つのリスト間でのドラッグ＆ドロップによる並べ替え
scope + toolbarSettings.items による、2 つのリスト間での項目移動パターン
allowFiltering + filtering イベントによるフィルターバーとカスタムロジック
sortOrder: 'Ascending' | 'Descending' によるデータの並べ替え
itemTemplate によるカスタム項目のレンダリング
enableItems() または fields.disabled による個々の項目の有効化／無効化
充実したプログラム用 API：addItems、removeItems、selectItems、moveTo、moveAllTo、getDataList

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/listbox-getting-started.md

インストール：npm install @syncfusion/ej2-dropdowns
CSS テーマのインポート（tailwind3、material、bootstrap5、fluent、fabric）
HTML の設定：<div id="listbox"></div>
静的データを使用した基本的な ListBox
change イベントハンドラー
複数選択
よくある設定の問題のトラブルシューティング

データバインディング

📄 参照： references/listbox-data-binding.md

文字列配列のシンプルなバインド
fields マッピング（text、value、iconCss、disabled）を使用したオブジェクト配列
fields.groupBy によるグループ化
動的データ：addItems、dataBind
DataManager と ODataV4Adaptor を使用したリモートデータ

選択

📄 参照： references/listbox-selection.md

単一選択（selectionSettings.mode: 'Single'）
複数選択（デフォルト）
value: ['id1', 'id2'] による事前選択
選択数の上限を設定する maximumSelectionLength
チェックボックス選択：ListBox.Inject(CheckBoxSelection) + selectionSettings.showCheckbox: true
selectionSettings.showSelectAll: true による「すべて選択」
selectItems() と selectAll() によるプログラムからの選択／選択解除
getDataByValues() による選択済みデータの取得

機能

📄 参照： references/listbox-features.md

フィルターバー：allowFiltering、filterBarPlaceholder、filterType
filtering イベント + args.updateData() によるカスタムフィルター
sortOrder: 'Ascending' | 'Descending' による並べ替え
scope を使用した、単一リスト内および 2 つのリスト間でのドラッグ＆ドロップ
enableItems() または fields.disabled による項目の有効化／無効化
スクロールに対応した固定の高さ

2 つの ListBox（項目移動用リスト）

📄 参照： references/listbox-dual-list-box.md

scope: '#target-id' + toolbarSettings.items による 2 つの ListBox の連携
6 種類すべてのツールバー操作：moveUp、moveDown、moveTo、moveFrom、moveAllTo、moveAllFrom
並べ替えのみ、一方向の項目移動、双方向の項目移動のパターン
ツールバーの位置（Left / Right）
プログラムによる項目移動：moveTo、moveAllTo、moveUp、moveDown、moveTop、moveBottom
getDataList() による更新後の状態の読み取り
権限の割り当て例

アイコンとテンプレート

📄 参照： references/listbox-icons-and-templates.md

fields.iconCss によるアイコン CSS の設定
テキストフィールド内の絵文字アイコン
${} 文字列テンプレート構文を使用した itemTemplate
アイコンと説明を配置するテンプレート
ステータスバッジを含むテンプレート
noRecordsTemplate のカスタマイズ

スタイルと外観

📄 参照： references/listbox-style-and-appearance.md

CSS テーマのインポート（tailwind3 / material / bootstrap5 / fluent / fabric）
CSS クラスの上書き：.e-listbox-wrapper、.e-list-item、.e-selected、.e-disabled、.e-list-group-item
スコープを限定したカスタムスタイルには cssClass を使用
itemTemplate と CSS を使った条件付きの項目スタイル設定
レスポンシブな height と width、RTL サポート

アクセシビリティ

📄 参照： references/listbox-accessibility.md

WCAG 2.2 AA / Section 508 / ARIA 1.2 に準拠
ARIA 属性（role、aria-multiselectable、aria-selected）を自動適用
htmlAttributes によるカスタム ARIA
キーボードショートカットの表（Arrow、Space、Enter、Home、End、Shift+Arrow、Ctrl+A）
<label> と aria-live によるスクリーンリーダーのラベル関連付け
RTL：enableRtl: true またはグローバル設定の enableRtl(true)

ハウツーガイド

📄 参照： references/listbox-how-to-guides.md

addItems() で単一または複数の項目を追加
項目の重複を防止
selectItems() で項目をプログラムから選択
enableItems() で項目を有効化／無効化
filtering イベントによるカスタムフィルターロジック
固定高さのスクローラー
フォーム連携：送信時に getDataByValues() で選択内容を読み取る

API リファレンス

📄 参照： references/listbox-api.md

型とデフォルト値を含むすべてのプロパティ
すべてのメソッド：addItems、enableItems、filter、getDataByValue、getDataByValues、getDataList、getItems、getSortedList、moveAllTo、moveBottom、moveDown、moveTo、moveTop、moveUp、removeItem、removeItems、selectAll、selectItems
すべてのイベント：change、created、dataBound、destroyed、drag、dragStart、drop、filtering、beforeDrop、beforeItemRender
サブインターフェイス：FieldSettingsModel、SelectionSettingsModel、ToolbarSettingsModel

クイックスタート


<link href="node_modules/@syncfusion/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />

<div id="listbox"></div>

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

const data: { [key: string]: Object }[] = [
  { text: 'JavaScript', id: '1' },
  { text: 'TypeScript', id: '2' },
  { text: 'React', id: '3' },
  { text: 'Angular', id: '4' },
  { text: 'Vue', id: '5' }
];

const listBox: ListBox = new ListBox({
  dataSource: data,
  fields: { text: 'text', value: 'id' },
  change: (args) => {
    console.log('Selected values:', args.value);
  }
});

listBox.appendTo('#listbox');

チェックボックスによる選択

import { ListBox, CheckBoxSelection } from '@syncfusion/ej2-dropdowns';

ListBox.Inject(CheckBoxSelection);  // Must be called before instantiation

const listBox: ListBox = new ListBox({
  dataSource: data,
  fields: { text: 'text', value: 'id' },
  selectionSettings: {
    showCheckbox: true,
    showSelectAll: true
  }
});

listBox.appendTo('#listbox');

デュアル ListBox（転送リスト）

<div id="available"></div>
<div id="selected"></div>

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

const available: ListBox = new ListBox({
  dataSource: data,
  fields: { text: 'text', value: 'id' },
  scope: '#selected',
  toolbarSettings: {
    items: ['moveTo', 'moveFrom', 'moveAllTo', 'moveAllFrom']
  }
});

const selected: ListBox = new ListBox({
  dataSource: [],
  fields: { text: 'text', value: 'id' }
});

available.appendTo('#available');
selected.appendTo('#selected');

一般的なパターン

パターン 1：［すべて選択］を使ったチェックボックス選択

import { ListBox, CheckBoxSelection } from '@syncfusion/ej2-dropdowns';

ListBox.Inject(CheckBoxSelection);

const listBox: ListBox = new ListBox({
  dataSource: frameworksData,
  fields: { text: 'text', value: 'id' },
  selectionSettings: { showCheckbox: true, showSelectAll: true },
  maximumSelectionLength: 3  // Allow up to 3 checkboxes
});

listBox.appendTo('#listbox');

パターン 2：フィルタリング

const listBox: ListBox = new ListBox({
  dataSource: data,
  fields: { text: 'text', value: 'id' },
  allowFiltering: true,
  filterBarPlaceholder: 'Search frameworks...',
  filterType: 'Contains'
});

listBox.appendTo('#listbox');

パターン 3：フォーム送信時に選択項目を読み取る

document.getElementById('submitBtn')!.addEventListener('click', () => {
  const selectedValues = listBox.value as string[];
  const selectedItems = listBox.getDataByValues(selectedValues);
  console.log('Submitted:', selectedItems);
});

主なプロパティ

プロパティ	型	デフォルト	用途
`dataSource`	`array \| DataManager`	`[]`	リストに表示するデータ
`fields`	`FieldSettingsModel`	`{}`	テキスト、値、アイコン CSS、グループ化、無効状態をマッピング
`value`	`string[] \| number[] \| boolean[]`	`[]`	事前選択済み、または現在選択されている値
`selectionSettings`	`SelectionSettingsModel`	`{ mode: 'Multiple' }`	選択モードとチェックボックスのオプション
`toolbarSettings`	`ToolbarSettingsModel`	`{ items: [] }`	デュアル ListBox のツールバー設定
`scope`	`string`	`''`	ドラッグ＆ドロップまたはツールバーによる転送先の ListBox ID
`allowFiltering`	`boolean`	`false`	フィルター／検索バーを表示
`allowDragAndDrop`	`boolean`	`false`	ドラッグ＆ドロップによる並べ替えを有効化
`sortOrder`	`SortOrder`	`null`	項目の並べ替え：`'Ascending'` \| `'Descending'`
`height`	`string \| number`	`''`	スクロール可能な固定の高さ
`itemTemplate`	`string \| Function`	`null`	カスタム項目レンダリングテンプレート
`maximumSelectionLength`	`number`	`1000`	選択可能な項目の最大数
`enableRtl`	`boolean`	`false`	右から左へのレンダリング
`cssClass`	`string`	`''`	スコープを限定したスタイル設定用のカスタム CSS クラス

マルチカラムコンボボックス

Syncfusion EJ2 JavaScript の MultiColumnComboBox は、複数列のポップアップグリッドを備えたコンボボックスを表示し、構造化された表形式のデータから項目を選択できます。ローカルデータとリモートデータ、フィルタリング、並べ替え、グループ化、テンプレート、仮想化をサポートし、完全なアクセシビリティ要件に準拠しています。

パッケージ： @syncfusion/ej2-multicolumn-combobox

ナビゲーションガイド

はじめに

📄 参照： references/multicolumn-combobox-getting-started.md

インストールとパッケージのセットアップ（npm install @syncfusion/ej2-multicolumn-combobox）
CSS のインポートとテーマの設定（Tailwind 3、Material、Bootstrap 5、Fluent、Fabric）
HTML の <input> ターゲットのセットアップ
new MultiColumnComboBox({...}).appendTo('#id') による初期化
dataSource、fields、columns: ColumnModel[] のバインド
popupHeight と popupWidth の設定
最小限の実用例

列

📄 参照： references/multicolumn-combobox-columns.md

ColumnModel による列の定義（field、header、width、textAlign）
セル単位のカスタム描画に使用する template
ブール値の列に使用する displayAsCheckBox
列の CSS カスタマイズに使用する customAttributes
カスタム列ヘッダーに使用する headerTemplate
データの書式設定に使用する format（通貨には C2、日付にはスケルトン）

データバインディング

📄 参照： references/multicolumn-combobox-data-binding.md

dataSource によるローカルオブジェクト配列のバインド
DataManager と WebApiAdaptor／ODataAdaptor／ODataV4Adaptor によるリモートデータバインディング
fields（text、value、groupBy）のマッピング
フィルターまたは件数制限を適用したデータセットに query プロパティを使用

フィルタリング

📄 参照： references/multicolumn-combobox-filtering.md

allowFiltering によるフィルタリングの有効化／無効化
filterType（StartsWith、EndsWith、Contains）によるフィルターモードの変更
カスタムフィルターロジックに使用する filtering イベント
読み取り専用の状況でフィルタリングを無効化

並べ替え

📄 参照： references/multicolumn-combobox-sorting.md

allowSorting による並べ替えの有効化
sortOrder（None、Ascending、Descending）による初期の並べ替え順の設定
sortType（OneColumn、MultipleColumns）による複数列の並べ替え
列ヘッダーをクリックして並べ替え方向を切り替え

グループ化

📄 参照： references/multicolumn-combobox-grouping.md

fields.groupBy によるデータのグループ化
ポップアップ内の固定グループヘッダー
groupTemplate によるグループヘッダーのカスタマイズ（${key}、${field}、${count} トークン）

テンプレート

📄 参照： references/multicolumn-combobox-templates.md

各行のカスタマイズに使用する itemTemplate
カスタム列ヘッダーに使用する headerTemplate（ColumnModel 上）
グループヘッダーのカスタマイズに使用する groupTemplate
ポップアップのフッターコンテンツに使用する footerTemplate
空の状態の表示に使用する noRecordsTemplate
リモートデータ取得エラー状態に使用する actionFailureTemplate

項目と設定

📄 参照： references/multicolumn-combobox-items.md

text、value、index による初期選択の設定
入力ラベルの動作に使用する placeholder と floatLabelType
選択をクリアできるようにする showClearButton
disabled と readonly の状態
サイズ設定用の width、popupWidth、popupHeight
カスタムスタイルに使用する cssClass
追加の HTML 属性に使用する htmlAttributes
グリッド線、行の高さ、交互の行に使用する gridSettings
プログラムから呼び出すメソッド：addItems、focusIn、focusOut、showPopup、hidePopup、getDataByValue、getItems

仮想化

📄 参照： references/multicolumn-combobox-virtualization.md

大規模なデータセットに対する enableVirtualization の有効化
ローカルデータおよびリモートデータでの仮想スクロール
正確な位置調整のために gridSettings.rowHeight と組み合わせる
100 件以上のデータセットに関するベストプラクティス

イベント

📄 参照： references/multicolumn-combobox-events.md

change — 値が変更されたとき、または項目が選択されたときに発生します
select — 項目が選択されたときに発生します
open / close — ポップアップの開閉ライフサイクル
filtering — カスタムフィルタリングのため、文字が入力されたときに発生します
actionBegin / actionComplete / actionFailure — データ取得のライフサイクル
created — レンダリング後のライフサイクルフック

ローカライズ

📄 参照： references/multicolumn-combobox-localization.md

'multicolumncombobox' ロケールキーを指定した L10n.load() による noRecordsTemplate テキストのローカライズ
文化圏に応じたレンダリングのための locale プロパティの設定
翻訳オブジェクトの読み込み
BCP 47 言語タグ（例：'en-US'、'fr-BE'、'de'）

アクセシビリティ

📄 参照： references/multicolumn-combobox-accessibility.md

WCAG 2.2 および Section 508 への準拠
WAI-ARIA 属性（role="combobox"、aria-expanded、aria-selected、aria-readonly、aria-disabled、aria-owns）
キーボードナビゲーションのショートカット（Alt+Down/Alt+Up、矢印キー、PageUp/PageDown、Enter、Esc、Home、End）
enableRtl: true による RTL サポート
スクリーンリーダーのサポート

API リファレンス

📄 参照： references/multicolumn-combobox-api.md

型とデフォルト値を含む、すべてのプロパティの完全な一覧
引数の型を含む、すべてのイベント
すべてのメソッド：addItems、focusIn、focusOut、getDataByValue、getItems、showPopup、hidePopup
ColumnModel のプロパティ（field、header、width、textAlign、template、headerTemplate、displayAsCheckBox、customAttributes、format）
GridSettingsModel のプロパティ（rowHeight、gridLines、enableAltRow）
FieldSettingsModel のプロパティ（text、value、groupBy）

クイックスタート

// app.ts
import { MultiColumnComboBox, ColumnModel } from '@syncfusion/ej2-multicolumn-combobox';

const empData: { [key: string]: Object }[] = [
  { 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'  },
  { EmpID: 1004, Name: 'Steven Buchanan',  Designation: 'Product Manager', Country: 'Ukraine' }
];

const fields: object = { text: 'Name', value: 'EmpID' };

const columns: ColumnModel[] = [
  { field: 'EmpID',       header: 'Employee ID', width: 120 },
  { field: 'Name',        header: 'Name',        width: 120 },
  { field: 'Designation', header: 'Designation', width: 120 },
  { field: 'Country',     header: 'Country',     width: 100 }
];

const mccBox: MultiColumnComboBox = new MultiColumnComboBox({
  dataSource: empData,
  fields: fields,
  columns: columns,
  placeholder: 'Select an employee'
});

mccBox.appendTo('#multicolumn');


<input type="text" id="multicolumn" />

/* styles.css */
@import '~@syncfusion/ej2-base/styles/tailwind3.css';
@import '~@syncfusion/ej2-inputs/styles/tailwind3.css';
@import '~@syncfusion/ej2-grids/styles/tailwind3.css';
@import '~@syncfusion/ej2-popups/styles/tailwind3.css';
@import '~@syncfusion/ej2-multicolumn-combobox/styles/tailwind3.css';

よくあるパターン

テキストで項目を事前選択する

const mccBox: MultiColumnComboBox = new MultiColumnComboBox({
  dataSource: empData,
  fields: fields,
  text: 'Michael',
  columns: columns
});
mccBox.appendTo('#multicolumn');

Contains モードでフィルタリングを有効にする

const mccBox: MultiColumnComboBox = new MultiColumnComboBox({
  dataSource: empData,
  fields: fields,
  allowFiltering: true,
  filterType: 'Contains',
  columns: columns
});
mccBox.appendTo('#multicolumn');

複数列のサポートを有効にして、降順で並べ替える

import { MultiColumnComboBox, SortOrder, ColumnModel } from '@syncfusion/ej2-multicolumn-combobox';

const mccBox: MultiColumnComboBox = new MultiColumnComboBox({
  dataSource: empData,
  fields: fields,
  allowSorting: true,
  sortOrder: SortOrder.Descending,
  sortType: 'MultipleColumns',
  columns: columns
});
mccBox.appendTo('#multicolumn');

OData v4 によるリモートデータバインディング（セキュリティ優先）

セキュリティ： クライアント側のコードから、任意のサードパーティエンドポイントを呼び出さないでください。外部 API リクエストは、応答を検証、認証、サニタイズする、信頼できるサーバー側プロキシを経由させてください。

import { MultiColumnComboBox, ColumnModel } from '@syncfusion/ej2-multicolumn-combobox';
import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';

// Use a trusted server-side proxy. Do not embed third-party URLs directly.
const dataSource: DataManager = new DataManager({
  url: 'https://your-trusted-proxy.example/api/customers',
  adaptor: new ODataV4Adaptor(),
  crossDomain: true
});

const fields: object = { text: 'FirstName', value: 'EmployeeID' };

const columns: ColumnModel[] = [
  { field: 'EmployeeID',  header: 'Employee ID', width: 120 },
  { field: 'FirstName',   header: 'Name',        width: 130 },
  { field: 'Designation', header: 'Designation', width: 120 },
  { field: 'Country',     header: 'Country',     width: 90  }
];

const mccBox: MultiColumnComboBox = new MultiColumnComboBox({
  dataSource: dataSource,
  fields: fields,
  placeholder: 'Select a name',
  popupHeight: '230px',
  columns: columns
});
mccBox.appendTo('#multicolumn');

値変更イベントを処理する

import { MultiColumnComboBox, ChangeEventArgs } from '@syncfusion/ej2-multicolumn-combobox';

const mccBox: MultiColumnComboBox = new MultiColumnComboBox({
  dataSource: empData,
  fields: fields,
  columns: columns,
  change: (args: ChangeEventArgs) => {
    console.log('Selected value:', args.value);
    console.log('Display text:', args.text);
    console.log('Item data:', args.itemData);
  }
});
mccBox.appendTo('#multicolumn');

主なプロパティ

プロパティ	型	デフォルト	目的
`dataSource`	`Object[] \| DataManager`	`[]`	ポップアップグリッドに表示するデータ
`fields`	`FieldSettingsModel`	`{text:null, value:null, groupBy:null}`	データキーを表示テキスト、非表示の値、グループ化に対応付けます
`columns`	`ColumnModel[]`	`[]`	ポップアップグリッドの列定義
`value`	`string`	`null`	値で項目を事前選択します
`text`	`string`	`null`	表示テキストで項目を事前選択します
`index`	`number`	`null`	0 から始まるインデックスで項目を事前選択します
`placeholder`	`string`	`null`	入力欄のヒントテキスト
`floatLabelType`	`'Never' \| 'Always' \| 'Auto'`	`'Never'`	フローティングラベルの動作
`allowFiltering`	`boolean`	`true`	フィルター入力を有効にします
`filterType`	`'StartsWith' \| 'EndsWith' \| 'Contains'`	`'StartsWith'`	フィルターの一致方法
`allowSorting`	`boolean`	`true`	列見出しによる並べ替えを有効にします
`sortOrder`	`SortOrder`	`SortOrder.None`	初期の並べ替え方向
`sortType`	`SortType`	`'OneColumn'`	単一列または複数列での並べ替え
`enableVirtualization`	`boolean`	`false`	大規模データセット向けの仮想スクロール
`enableRtl`	`boolean`	`false`	右から左への表示
`enablePersistence`	`boolean`	`false`	ページを再読み込みしても `value` を保持します
`readonly`	`boolean`	`false`	ユーザー入力を禁止します
`disabled`	`boolean`	`false`	コンポーネントを完全に無効にします
`showClearButton`	`boolean`	`false`	クリア（×）ボタンを表示します
`cssClass`	`string`	`''`	ルート要素に適用するカスタム CSS クラス
`popupHeight`	`string \| number`	`'300px'`	ポップアップの高さ
`popupWidth`	`string \| number`	`'100%'`	ポップアップの幅
`width`	`string \| number`	`'100%'`	入力要素の幅
`gridSettings`	`GridSettingsModel`	`{rowHeight:null, gridLines:'Default', enableAltRow:false}`	ポップアップグリッドの外観
`query`	`Query`	`null`	リモートデータ用のクエリ
`htmlAttributes`	`{ [key: string]: string }`	`{}`	入力欄に設定する HTML 属性
`locale`	`string`	`''`	ロケールコード（例：`'fr-BE'`）
`itemTemplate`	`string \| Function`	`null`	カスタム行テンプレート
`groupTemplate`	`string \| Function`	`null`	カスタムグループ見出しテンプレート
`footerTemplate`	`string \| Function`	`null`	カスタムフッターテンプレート
`noRecordsTemplate`	`string \| Function`	`'No records found'`	空の状態を表示するテンプレート
`actionFailureTemplate`	`string \| Function`	`'Request failed'`	リモートエラー用テンプレート

Markdown 対応

ログインしてコメント

基本情報

作者: syncfusion
リポジトリ: syncfusion/javascript-ui-controls-skills
カテゴリ: 開発
インストール数: 73
GitHub スター: 0

問題を報告

syncfusion-javascript-dropdowns

syncfusion-javascript-dropdowns について

主な機能

活用シーン

インストール

同梱ファイル

詳細

Syncfusion javascript ドロップダウン

DropDownList

ドキュメントとナビゲーションガイド

はじめに

データバインド

フィルタリング

グループ化

テンプレート

機能と設定

イベントとメソッド

カスケード DropDownList

スタイルとアクセシビリティ

API リファレンス

インストール

クイックスタート

よく使われるパターン

フィールドマッピングを使用した JSON データ

OData を使用したリモートデータ

検索ボックスを使用したフィルタリング

値変更の処理

主なプロパティ一覧

MultiSelect

ドキュメントのナビゲーションガイド

はじめに

データバインディングとデータソース

選択モードと値

チェックボックスと複数選択機能

フィルタリングと検索

グループ化と並べ替え

カスケードドロップダウン

カスタマイズとテンプレート

パフォーマンス：仮想スクロール

アクセシビリティと標準規格

ハウツーとトラブルシューティング

API リファレンス

クイックスタートの例

基本設定

チェックボックス付きの複数選択

フィルタリングを使用する場合

一般的なパターン

パターン 1：連動するドロップダウン

パターン 2：リモートデータバインディング

パターン 3：カスタム項目テンプレート

主要なプロパティのクイックリファレンス

関連機能

AutoComplete

ナビゲーションガイド

はじめに

フィルタリングの設定

データバインディング

ハイライトと候補の制御

カスタマイズとアクセシビリティ

仮想化

API リファレンス全文

クイックスタート

よくあるパターン

Contains ではなく StartsWith でフィルタリングする

フィールドマッピングを使ったオブジェクトデータ

イベントによるカスタムフィルタリング

一致したテキストを強調表示し、候補数を制限する

主なプロパティ

ComboBox

コンポーネントの概要

ドキュメントとナビゲーションガイド

はじめに

データバインディング

フィルタリング

カスタム値

カスタマイズ

仮想化

API リファレンス全体

クイックスタート

よく使われるパターン