Transformar los selects tradicionales de HTML en componentes interactivos y visualmente atractivos es una mejora significativa para cualquier aplicación web moderna. Con la librería Selectize, puedes lograrlo de forma sencilla integrándola con Rails y Webpacker, obteniendo plantillas personalizables y comportamientos dinámicos que enriquecen la experiencia del usuario.
¿Qué es Selectize y por qué usarlo en tus formularios?
Selectize es una librería de JavaScript que transforma los elementos select nativos en componentes con una interacción gráfica mucho más agradable [0:26]. Entre sus ventajas se encuentran:
- Sistemas de plantillas que puedes diseñar y personalizar de forma individual.
- Comportamientos dinámicos valiosos para aplicaciones web modernas.
- Compatibilidad con jQuery, lo cual facilita su uso en proyectos que ya utilizan Bootstrap.
El proceso de instalación comienza desde la consola de comandos utilizando Yarn, el gestor de paquetes. Con el comando yarn add selectize se descarga e instala la librería en el proyecto [1:07].
¿Cómo se importa Selectize en el proyecto de Rails?
Una vez instalada la librería con Yarn, es necesario importarla dentro del archivo application.js, ubicado en la ruta app/javascript/packs/. En la línea correspondiente se agrega la declaración de importación [1:30]:
javascript
import 'selectize'
Esta línea conecta la librería descargada con el sistema de assets de la aplicación a través de Webpacker, que actúa como el empaquetador de módulos JavaScript en Rails.
¿Cómo configurar Selectize con un namespace en CoffeeScript?
Para mantener el código organizado, se define un namespace llamado Misc dentro del archivo main.coffee [2:10]. Dentro de este namespace se crea la función selectize_by_scope, que recibe un selector CSS como parámetro y aplica la configuración de Selectize a todos los elementos contenidos en ese selector que tengan la clase .selectize.
Esta estrategia permite optimizar la configuración sin tener que aplicarla de forma individual a cada select. La función busca dentro del contenedor referenciado todos los elementos con la clase indicada, los itera y les aplica la transformación [2:48]:
coffeescript
platzi.misc.selectize_by_scope = (scope) ->
$(scope).find('.selectize').each ->
$(this).selectize()
Para que esta función se ejecute automáticamente al cargar la aplicación, se invoca dentro de la función init pasando el body como contenedor principal [3:50]:
coffeescript
platzi.misc.selectize_by_scope('body')
De esta forma, cualquier select en toda la página que tenga la clase selectize quedará transformado.
¿Cómo aplicar Selectize en un formulario de Rails?
En el formulario de tareas, por ejemplo, el campo de selección de categorías se puede selectizar agregando la clase correspondiente mediante el parámetro input_html [4:13]:
erb
<%= f.input :category_id, input_html: { class: 'selectize' } %>
Al recargar la página, el select funciona correctamente, pero presenta problemas visuales porque el CSS de Selectize no es compatible de forma nativa con Bootstrap 4 [4:40].
¿Cómo solucionar los problemas de CSS entre Selectize y Bootstrap?
La comunidad ya ha resuelto esta incompatibilidad con un archivo CSS específico para Bootstrap 4. El proceso consiste en:
- Obtener el archivo CSS desde el enlace proporcionado en los recursos de la clase [5:00].
- Crear un nuevo archivo dentro de la carpeta
stylesheets/source con el nombre selectize.bootstrap4.css [5:20].
- Pegar el contenido del CSS descargado en ese archivo.
- Importarlo desde el archivo principal de estilos usando la directiva
@import [5:48].
css
@import 'selectize.bootstrap4';
Es importante verificar que el nombre del archivo coincida exactamente con la referencia en la importación, ya que un simple typo puede provocar un error de tipo "File to import not found" [6:05]. Tras corregir cualquier error y refrescar la página, el Selectize queda completamente integrado con los estilos de Bootstrap, mostrando un componente funcional y visualmente coherente [6:25].
Esta integración sienta las bases para aplicar Selectize también dentro de formularios anidados, un tema que se aborda con el concepto de nested forms en Rails. Si has trabajado con selects complejos en tus proyectos, comparte tu experiencia y cuéntanos cómo los has resuelto.
