Chosen
Integrates the Chosen JavaScript library to transform standard HTML select elements into user-friendly, searchable dropdown widgets with enhanced multi-select capabilities.
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
Improving taxonomy term selection on content edit forms
When content types have taxonomy reference fields with many terms (e.g., 50+ tags or categories), the standard select element becomes unwieldy. With Chosen, editors can quickly search and filter through large taxonomy vocabularies to find the terms they need.
Enhancing Views exposed filters
For Views with multiple exposed filters containing many options, Chosen transforms these into searchable dropdowns, making it easier for users to filter content. Combined with Better Exposed Filters, this provides a polished filtering experience.
Streamlining entity reference field selection
When referencing other entities (nodes, users, terms) through entity reference fields, Chosen's search capability helps users quickly find the correct reference from potentially hundreds of options.
Managing multi-value field selections
For fields allowing multiple selections (like multiple tags or categories), Chosen displays selected items as removable tags, providing clear visual feedback and easy management of selections.
Custom form implementations
Developers can force Chosen on specific form elements by adding #chosen => TRUE to the render array, or exclude elements with #chosen => FALSE or the 'chosen-disable' class.
Tips
- Use the 'chosen-enable' class on a select element to force Chosen, or 'chosen-disable' to prevent it
- Set #chosen property in form elements: #chosen => TRUE to force, #chosen => FALSE to disable
- For better performance with very large option lists, configure the 'Maximum shown results' setting
- The module automatically removes '_none' placeholder options from multi-select fields
- Field cardinality is respected - if a field allows 3 values, Chosen will limit selections to 3
- RTL language support is automatic based on the current language direction
Technical Details
Admin Pages 1
/admin/config/user-interface/chosen
Configuration page for the Chosen module. This page allows administrators to control how and where the Chosen JavaScript library is applied to select elements throughout the site. Settings include threshold controls, visual appearance options, and text customization.
Hooks 4
hook_element_info_alter
Used to add pre-render callbacks to select, date_combo, select_or_other, and synonyms_entity_select form elements
hook_field_widget_single_element_form_alter
Used to add entity type and bundle information to field widgets, enabling proper cardinality handling
hook_library_info_alter
Used by chosen_lib to dynamically set the path to the Chosen JavaScript library based on where it's installed
hook_migration_plugins_alter
Used to add the chosen migration process plugin to field widget migrations when migrating from Drupal 7
Drush Commands 1
drush chosen:plugin
Downloads and installs the Chosen JavaScript library to the libraries folder. This command automatically downloads the correct version of the library from the noli42/chosen GitHub repository and extracts it to the proper location.
Troubleshooting 5
Check that the Chosen library is properly installed in libraries/chosen. Visit the Status Report page to verify the library is detected. Also verify the jQuery selector in configuration matches your select elements.
Add the element's selector to the jQuery selector field using the :not() pseudo-selector. For example: select:not([name*='day'],[name*='year'],[name*='month']) to exclude date selects.
Either add your theme to the 'Disable the default Chosen theme' checkbox list, or create custom CSS overrides. The Claro theme has built-in compatibility.
The module includes special handling for Drupal modals. If issues persist, ensure the modal content is processed after Drupal behaviors attach.
Use the Drush command 'drush chosen:plugin' to automatically download and install the library, or manually download from https://github.com/noli42/chosen/releases and extract to libraries/chosen.