Select 2
Integra la biblioteca JavaScript Select2 con Drupal, proporcionando elementos de formulario select mejorados y widgets de campo para campos de lista y campos de referencia a entidades.
select2
Install
composer require 'drupal/select2:^2.0'
composer require 'drupal/select2:8.x-1.15'
composer require 'drupal/select2:8.x-1.13'
Overview
El módulo Select2 integra la popular biblioteca JavaScript Select2 con Drupal, proporcionando una alternativa moderna y fácil de usar a los elementos select HTML estándar. Ofrece funciones avanzadas que incluyen desplegables con búsqueda, funcionalidad de autocompletado y soporte para seleccionar múltiples valores con reordenamiento mediante arrastrar y soltar.
El módulo proporciona tres componentes principales: un elemento de renderizado (#type => 'select2') para formularios personalizados, un widget de campo para campos de lista (list_integer, list_float, list_string) y un widget de campo avanzado para campos de referencia a entidades. El widget de referencia a entidades soporta autocompletado con AJAX para grandes conjuntos de datos y puede crear nuevas entidades sobre la marcha (función autocreate).
Además, el módulo incluye integración con el módulo Better Exposed Filters para filtros expuestos de Views y proporciona dos submódulos: Select2 Facets para widgets de facetas de Search API, y Select2 Publish para mostrar indicadores de estado de publicación en entidades referenciadas. Se incluye integración de temas para los temas del núcleo de Drupal (Seven, Claro) y el popular tema de administración Gin.
Features
- Proporciona un elemento de renderizado de formulario Select2 (#type => 'select2') con soporte para selección simple y múltiple, grupos de opciones y configuración personalizable de JavaScript Select2
- Widget de campo Select2 para campos de lista (list_integer, list_float, list_string) con ancho de campo configurable
- Widget de campo Select2 avanzado para campos de referencia a entidades con soporte de autocompletado AJAX para grandes conjuntos de datos
- Funcionalidad de autocreación de entidades que permite crear nuevas entidades sobre la marcha durante la selección
- Reordenamiento de elementos seleccionados mediante arrastrar y soltar en modo de selección múltiple usando la biblioteca Sortable
- Soporte de internacionalización (i18n) con detección automática de idioma y carga de archivos de idioma de Select2
- Integración de temas con carga automática de CSS para los temas de administración Seven, Claro y Gin
- Integración con el módulo Better Exposed Filters proporcionando widgets Select2 para filtros expuestos de Views y opciones de ordenamiento
- Endpoint de autocompletado personalizado (/select2_autocomplete) con manejo seguro de configuraciones de selección
- Arquitectura extensible con hooks para modificar coincidencias de autocompletado (hook_select2_autocomplete_matches_alter)
- Soporte para límites de cardinalidad de campo (maximumSelectionLength) y el módulo field_config_cardinality
Use Cases
Selección mejorada de referencias a entidades para editores de contenido
Reemplazar widgets estándar de autocompletado o select de referencia a entidades con Select2 para una mejor experiencia de usuario. Los editores pueden buscar a través de grandes listas de entidades con filtrado instantáneo, ver más contexto en las opciones del desplegable y reordenar múltiples selecciones mediante arrastrar y soltar. Habilitar el modo de autocompletado para campos de referencia a entidades con miles de opciones para mejorar el rendimiento de carga de página.
Selección de términos de taxonomía con autocreación
Usar Select2 para campos de referencia a términos de taxonomía con autocreación habilitada. Los editores pueden seleccionar términos existentes del desplegable con búsqueda o escribir nombres de nuevos términos que se crearán automáticamente cuando se guarde el contenido. El separador de coma permite la entrada rápida de múltiples nuevas etiquetas.
Filtros expuestos de Views mejorados
Cuando se usa el módulo Better Exposed Filters, reemplazar elementos select estándar en filtros expuestos de Views con widgets Select2. Esto es particularmente útil para Views con muchas opciones de filtro (por ejemplo, filtrar por términos de taxonomía, autores o tipos de contenido) donde el desplegable con búsqueda mejora significativamente la usabilidad.
Búsqueda facetada con Search API
Usar el submódulo Select2 Facets para proporcionar widgets Select2 para facetas de Search API. Esto es ideal para interfaces de búsqueda facetada con muchos valores posibles, permitiendo a los usuarios encontrar y seleccionar rápidamente los valores de faceta que necesitan. Habilitar el modo de autocompletado para facetas con cientos o miles de valores.
Elementos de formulario personalizados en módulos
Los desarrolladores pueden usar el elemento de renderizado Select2 (#type => 'select2') en formularios personalizados para proporcionar funcionalidad select mejorada. El elemento soporta todas las opciones de configuración JavaScript de Select2 estándar a través de la propiedad #select2, permitiendo personalización completa del comportamiento y apariencia.
Flujo de trabajo editorial con visibilidad del estado de publicación
Habilitar el submódulo Select2 Publish para mostrar a los editores qué entidades referenciadas están publicadas o no publicadas directamente en el desplegable Select2. Las entidades no publicadas aparecen en rojo, facilitando identificar contenido en borrador al crear relaciones entre entidades.
Tips
- Habilitar el modo de autocompletado para campos de referencia a entidades con más de 50-100 opciones para mejorar el rendimiento de carga de página
- Usar el operador de coincidencia 'STARTS_WITH' en lugar de 'CONTAINS' para grandes conjuntos de datos para mejorar el rendimiento del autocompletado
- Establecer un match_limit apropiado (por ejemplo, 10-20) para evitar abrumar a los usuarios con demasiadas sugerencias de autocompletado
- Crear un archivo CSS de tema Select2 personalizado en su tema de administración para que coincida con el diseño de su sitio - copiar estilos con '--default' de select2.css y reemplazar con el nombre de máquina de su tema
- Usar la propiedad #select2 en el elemento de renderizado para anular cualquier opción de configuración JavaScript de Select2
- El módulo emite un evento jQuery 'select2-init' antes de la inicialización, permitiendo a otros módulos modificar la configuración
- Para campos de referencia a entidades muy grandes, considerar usar manejadores de selección basados en Views con filtros apropiados para limitar las opciones disponibles
- El separador de coma se habilita automáticamente para campos con autocreación, permitiendo la entrada rápida de múltiples elementos nuevos
Technical Details
Hooks 1
hook_select2_autocomplete_matches_alter
Permite a los módulos alterar las coincidencias de autocompletado devueltas por el endpoint de autocompletado de Select2. Este hook se invoca después de que las entidades coincidan pero antes de que los resultados se devuelvan al cliente.
Troubleshooting 6
Descargar la biblioteca Select2 desde https://github.com/select2/select2/releases y colocarla en la carpeta libraries (libraries/select2). La biblioteca debe contener los archivos dist/js/select2.min.js y dist/css/select2.min.css. Alternativamente, usar Composer con asset-packagist para gestionar la biblioteca automáticamente.
Asegurarse de que la biblioteca JavaScript Select2 esté correctamente instalada y accesible. Verificar la consola del navegador en busca de errores de JavaScript. Comprobar que jQuery y otras dependencias se carguen correctamente. Limpiar las cachés de Drupal y la caché del navegador.
Verificar que el tipo de entidad objetivo y la configuración del bundle estén correctamente configurados en los ajustes del campo. Comprobar que el usuario tenga permiso para ver las entidades referenciadas. Asegurarse de que la configuración del manejador de selección (match_operator, match_limit) sea apropiada para su caso de uso.
Asegurarse de que autocreate esté habilitado en los ajustes del campo (handler_settings). Verificar que auto_create_bundle esté configurado con un bundle válido, o que solo haya un bundle objetivo configurado. Comprobar que el usuario actual tenga permiso para crear entidades del tipo objetivo.
El módulo carga automáticamente CSS específico del tema para los temas Seven, Claro y Gin. Para temas personalizados, crear una biblioteca select2.theme en el archivo libraries.yml de su tema con CSS personalizado. Ver el README del módulo para instrucciones sobre cómo crear temas Select2 personalizados.
Asegurarse de que la biblioteca Sortable (core/sortable) se cargue correctamente. Esta es una biblioteca del núcleo de Drupal que debería estar disponible por defecto. Verificar la consola del navegador en busca de errores de JavaScript relacionados con Sortable.
Security Notes 3
- El módulo usa claves de configuración de selección basadas en hash seguro para prevenir manipulación de parámetros del endpoint de autocompletado
- Los resultados de autocompletado respetan los permisos de acceso a entidades - los usuarios solo pueden ver entidades que tienen permiso para ver
- Las configuraciones de selección se almacenan en el almacén clave/valor de Drupal y se validan usando HMAC con el hash salt del sitio