Chosen
Integra la biblioteca JavaScript Chosen para transformar elementos select HTML estándar en widgets desplegables amigables y con búsqueda, con capacidades mejoradas de selección múltiple.
chosen
Install
composer require 'drupal/chosen:^5.0'
Overview
El módulo Chosen proporciona integración de Drupal para la biblioteca JavaScript Chosen, un popular plugin de jQuery que transforma elementos <select> ordinarios en menús desplegables atractivos y con búsqueda. Este módulo mejora significativamente la experiencia del usuario al trabajar con campos de selección, especialmente aquellos con muchas opciones.
Chosen reemplaza los elementos select nativos del navegador con una interfaz mejorada que incluye un cuadro de búsqueda para filtrar opciones, indicadores visuales para elementos seleccionados en campos de selección múltiple, y soporte para texto de marcador de posición. El módulo aplica automáticamente el comportamiento de Chosen a los elementos select en todo tu sitio Drupal según criterios configurables.
El módulo soporta tanto campos de selección única como de selección múltiple, respeta la configuración de cardinalidad de los campos, proporciona soporte para idiomas de derecha a izquierda (RTL) y ofrece estilos específicos para el tema de administración Claro. También se integra con el módulo Better Exposed Filters para filtros expuestos de Views.
Features
- Transforma elementos select estándar en menús desplegables con búsqueda y filtrado estilo autocompletado
- Soporta campos de selección múltiple con representación visual tipo etiquetas de los elementos seleccionados
- Umbral mínimo de opciones configurable para controlar cuándo se aplica Chosen según el número de opciones disponibles
- Búsqueda dentro del texto de las opciones con modo de búsqueda opcional 'contiene' que coincide en cualquier parte del texto de la opción
- Botones auxiliares opcionales (Todos/Ninguno) para seleccionar o deseleccionar rápidamente todas las opciones en campos de selección múltiple
- Permite la opción de deseleccionar en campos de selección única cuando existe una opción predeterminada vacía
- Interruptor de soporte para dispositivos móviles para habilitar o deshabilitar Chosen en navegadores móviles
- Personalización de CSS por tema con capacidad de deshabilitar el CSS predeterminado de Chosen para temas específicos
- Estilos específicos para el tema de administración Claro para una integración perfecta con el tema de administración predeterminado de Drupal
- Integración con Better Exposed Filters para formularios de filtros expuestos de Views
- Soporte para idiomas RTL (derecha a izquierda) con detección automática
- Configuración de ancho configurable con soporte para anchos en píxeles y porcentajes
- Comando Drush para instalación fácil de la biblioteca
- Plugin de widget de campo para campos de referencia a entidades y campos de lista
- Soporte de migración desde Drupal 7 con migración automática de configuración y widgets de campo
- Configuración basada en selectores jQuery para orientar elementos select específicos
- Optimización de rendimiento con opción de límite máximo de resultados
Use Cases
Mejorando la selección de términos de taxonomía en formularios de edición de contenido
Cuando los tipos de contenido tienen campos de referencia a taxonomía con muchos términos (ej., más de 50 etiquetas o categorías), el elemento select estándar se vuelve difícil de manejar. Con Chosen, los editores pueden buscar y filtrar rápidamente a través de grandes vocabularios de taxonomía para encontrar los términos que necesitan.
Mejorando los filtros expuestos de Views
Para Views con múltiples filtros expuestos que contienen muchas opciones, Chosen los transforma en desplegables con búsqueda, facilitando a los usuarios filtrar contenido. Combinado con Better Exposed Filters, esto proporciona una experiencia de filtrado pulida.
Agilizando la selección de campos de referencia a entidades
Al referenciar otras entidades (nodos, usuarios, términos) a través de campos de referencia a entidades, la capacidad de búsqueda de Chosen ayuda a los usuarios a encontrar rápidamente la referencia correcta entre potencialmente cientos de opciones.
Gestionando selecciones de campos con múltiples valores
Para campos que permiten múltiples selecciones (como múltiples etiquetas o categorías), Chosen muestra los elementos seleccionados como etiquetas removibles, proporcionando retroalimentación visual clara y fácil gestión de las selecciones.
Implementaciones de formularios personalizados
Los desarrolladores pueden forzar Chosen en elementos de formulario específicos añadiendo #chosen => TRUE al render array, o excluir elementos con #chosen => FALSE o la clase 'chosen-disable'.
Tips
- Usa la clase 'chosen-enable' en un elemento select para forzar Chosen, o 'chosen-disable' para prevenirlo
- Establece la propiedad #chosen en elementos de formulario: #chosen => TRUE para forzar, #chosen => FALSE para deshabilitar
- Para mejor rendimiento con listas de opciones muy grandes, configura el ajuste 'Máximo de resultados mostrados'
- El módulo elimina automáticamente las opciones de marcador de posición '_none' de campos de selección múltiple
- Se respeta la cardinalidad del campo - si un campo permite 3 valores, Chosen limitará las selecciones a 3
- El soporte para idiomas RTL es automático basándose en la dirección del idioma actual
Technical Details
Admin Pages 1
/admin/config/user-interface/chosen
Página de configuración del módulo Chosen. Esta página permite a los administradores controlar cómo y dónde se aplica la biblioteca JavaScript Chosen a los elementos select en todo el sitio. Los ajustes incluyen controles de umbral, opciones de apariencia visual y personalización de textos.
Hooks 4
hook_element_info_alter
Se usa para añadir callbacks de pre-renderizado a elementos de formulario select, date_combo, select_or_other y synonyms_entity_select
hook_field_widget_single_element_form_alter
Se usa para añadir información de tipo de entidad y bundle a los widgets de campo, habilitando el manejo adecuado de cardinalidad
hook_library_info_alter
Usado por chosen_lib para establecer dinámicamente la ruta a la biblioteca JavaScript Chosen según dónde esté instalada
hook_migration_plugins_alter
Se usa para añadir el plugin de proceso de migración de Chosen a las migraciones de widgets de campo al migrar desde Drupal 7
Drush Commands 1
drush chosen:plugin
Descarga e instala la biblioteca JavaScript Chosen en la carpeta libraries. Este comando descarga automáticamente la versión correcta de la biblioteca desde el repositorio GitHub noli42/chosen y la extrae en la ubicación adecuada.
Troubleshooting 5
Verifica que la biblioteca Chosen esté correctamente instalada en libraries/chosen. Visita la página de Informe de estado para verificar que la biblioteca se detecta. También verifica que el selector jQuery en la configuración coincida con tus elementos select.
Añade el selector del elemento al campo de selector jQuery usando el pseudo-selector :not(). Por ejemplo: select:not([name*='day'],[name*='year'],[name*='month']) para excluir selects de fecha.
Añade tu tema a la lista de casillas 'Deshabilitar el tema predeterminado de Chosen', o crea sobrescrituras CSS personalizadas. El tema Claro tiene compatibilidad incorporada.
El módulo incluye manejo especial para modales de Drupal. Si los problemas persisten, asegúrate de que el contenido del modal se procese después de que los behaviors de Drupal se adjunten.
Usa el comando Drush 'drush chosen:plugin' para descargar e instalar automáticamente la biblioteca, o descarga manualmente desde https://github.com/noli42/chosen/releases y extrae a libraries/chosen.