Chosen
Chosen JavaScriptライブラリを統合し、標準のHTML select要素を検索可能でユーザーフレンドリーなドロップダウンウィジェットに変換します。マルチセレクト機能も強化されています。
chosen
インストール
composer require 'drupal/chosen:^5.0'
概要
Chosenモジュールは、Chosen JavaScriptライブラリのDrupal統合を提供します。Chosenは、通常の<select>要素を魅力的で検索可能なドロップダウンメニューに変換する人気のjQueryプラグインです。このモジュールは、特に多くのオプションを持つselectフィールドでの作業時にユーザー体験を大幅に向上させます。
Chosenは、ネイティブブラウザのselect要素を、オプションをフィルタリングするための検索ボックス、マルチセレクトフィールドでの選択項目の視覚的インジケーター、プレースホルダーテキストのサポートを含む拡張インターフェースに置き換えます。モジュールは設定可能な条件に基づいて、Drupalサイト全体のselect要素に自動的にChosenの動作を適用します。
モジュールはシングルセレクトとマルチセレクトの両方のフィールドをサポートし、フィールドのカーディナリティ設定を尊重し、RTL（右から左）言語サポートを提供し、Claro管理テーマ用の専用スタイリングを提供します。また、ViewsのExposed FiltersにBetter Exposed Filtersモジュールとの統合も提供します。
Features
- 標準のselect要素をオートコンプリート形式のフィルタリング機能付き検索可能ドロップダウンメニューに変換
- 選択項目をタグ形式で視覚的に表示するマルチセレクトフィールドをサポート
- 利用可能なオプション数に基づいてChosenを適用するタイミングを制御する設定可能な最小オプション閾値
- オプションテキスト内のどこでも一致する「含む」検索モードによるオプションテキスト内検索
- マルチセレクトフィールドで全てのオプションを素早く選択/解除するためのオプションヘルパーボタン（すべて/なし）
- 空のデフォルトオプションが存在する場合のシングルセレクトフィールドの選択解除オプション
- モバイルブラウザでのChosenの有効/無効を切り替えるモバイルデバイスサポートトグル
- 特定テーマでChosenのデフォルトCSSを無効にする機能を持つテーマごとのCSSカスタマイズ
- DrupalのデフォルトClaroテーマとのシームレスな統合のためのClaro管理テーマ専用スタイリング
- ViewsのExposed Filterフォーム用Better Exposed Filters統合
- 自動検出によるRTL（右から左）言語サポート
- ピクセルとパーセンテージベースの幅の両方をサポートする設定可能な幅設定
- 簡単なライブラリインストールのためのDrushコマンド
- Entity ReferenceおよびListフィールド用のフィールドウィジェットプラグイン
- 設定とフィールドウィジェットの自動移行によるDrupal 7からの移行サポート
- 特定のselect要素をターゲットにするためのjQueryセレクターベースの設定
- 最大結果数制限オプションによるパフォーマンス最適化
Use Cases
コンテンツ編集フォームでのタクソノミータームの選択を改善
コンテンツタイプに多くのターム（例：50以上のタグやカテゴリ）を持つタクソノミー参照フィールドがある場合、標準のselect要素は扱いにくくなります。Chosenを使用すると、編集者は大規模なタクソノミーボキャブラリを素早く検索してフィルタリングし、必要なタームを見つけることができます。
Views Exposed Filtersの強化
多くのオプションを含む複数のExposed Filtersを持つViewsの場合、Chosenはこれらを検索可能なドロップダウンに変換し、ユーザーがコンテンツをフィルタリングしやすくします。Better Exposed Filtersと組み合わせることで、洗練されたフィルタリング体験を提供します。
Entity Referenceフィールドの選択を効率化
Entity Referenceフィールドを通じて他のエンティティ（Node、ユーザー、ターム）を参照する際、Chosenの検索機能により、ユーザーは潜在的に数百のオプションから正しい参照を素早く見つけることができます。
複数値フィールドの選択管理
複数の選択を許可するフィールド（複数のタグやカテゴリなど）の場合、Chosenは選択された項目を削除可能なタグとして表示し、明確な視覚的フィードバックと選択の簡単な管理を提供します。
カスタムフォームの実装
開発者は、render arrayに#chosen => TRUEを追加することで特定のフォーム要素にChosenを強制できます。また、#chosen => FALSEまたは'chosen-disable'クラスで要素を除外できます。
Tips
- select要素に'chosen-enable'クラスを使用してChosenを強制するか、'chosen-disable'で防止できます
- フォーム要素で#chosenプロパティを設定：#chosen => TRUEで強制、#chosen => FALSEで無効化
- 非常に大きなオプションリストでのパフォーマンス向上には、「最大表示結果数」設定を構成してください
- モジュールはマルチセレクトフィールドから'_none'プレースホルダーオプションを自動的に削除します
- フィールドのカーディナリティは尊重されます - フィールドが3つの値を許可する場合、Chosenは選択を3つに制限します
- RTL言語サポートは現在の言語の方向に基づいて自動的に行われます
Technical Details
Admin Pages 1
/admin/config/user-interface/chosen
Chosenモジュールの設定ページ。このページでは、管理者がサイト全体のselect要素にChosen JavaScriptライブラリをどのように、どこに適用するかを制御できます。設定には閾値コントロール、外観オプション、テキストのカスタマイズが含まれます。
Hooks 4
hook_element_info_alter
select、date_combo、select_or_other、およびsynonyms_entity_selectフォーム要素にプリレンダーコールバックを追加するために使用されます
hook_field_widget_single_element_form_alter
フィールドウィジェットにエンティティタイプとバンドル情報を追加し、適切なカーディナリティ処理を可能にするために使用されます
hook_library_info_alter
インストール場所に基づいてChosen JavaScriptライブラリへのパスを動的に設定するためにchosen_libで使用されます
hook_migration_plugins_alter
Drupal 7からの移行時にフィールドウィジェット移行にchosen移行プロセスプラグインを追加するために使用されます
Drush Commands 1
drush chosen:plugin
Chosen JavaScriptライブラリをダウンロードしてlibrariesフォルダにインストールします。このコマンドはnoli42/chosen GitHubリポジトリから正しいバージョンのライブラリを自動的にダウンロードし、適切な場所に展開します。
Troubleshooting 5
Chosenライブラリがlibraries/chosenに正しくインストールされていることを確認してください。ステータスレポートページにアクセスしてライブラリが検出されていることを確認してください。また、設定のjQueryセレクターがselect要素に一致していることを確認してください。
jQueryセレクターフィールドに:not()疑似セレクターを使用して要素のセレクターを追加してください。例：select:not([name*='day'],[name*='year'],[name*='month'])で日付のselectを除外できます。
「デフォルトのChosenテーマを無効化」チェックボックスリストにテーマを追加するか、カスタムCSSオーバーライドを作成してください。Claroテーマには組み込みの互換性があります。
モジュールにはDrupalモーダル用の特別な処理が含まれています。問題が続く場合は、Drupalビヘイビアがアタッチされた後にモーダルコンテンツが処理されていることを確認してください。
Drushコマンド'drush chosen:plugin'を使用してライブラリを自動的にダウンロードしてインストールするか、https://github.com/noli42/chosen/releases から手動でダウンロードしてlibraries/chosenに展開してください。