El estilo por defecto de los elementos select no es para todo el mundo. Es posible que, en ciertos proyectos, quieras personalizar el cómo se muestra (para que se vea igual en todos los navegadores y dispositivos) o solamente quieras añadirle una funcionalidad adicional que no esté soportado de forma nativa.
Afortunadamente hay un montón de plugins de jQuery con los que puedes simplificar este proceso. En este artículo vamos a ver unos cuantos, que de manera sencilla puedes insertar en tus proyectos. Algunos de estos plugins son altamente configurables mediante opciones, métodos y eventos, mientras que otros son simples reemplazos a los elementos select para que sean personalizables y más sencillos de utilizar.
Chosen
Chosen es un extenso plugin que no solo personaliza tus elementos select, sino que también le añade funcionalidades extra, como puede ser un buscador en dicho campo, selección múltiple y resaltado de opciones.
Puedes utilizar este plugin si estás buscando modificar el estilo por defecto de los elementos select, pero su verdadero poder reside en sus funcionalidades adicionales:
- La capacidad de gestionar múltiples opciones. Cada opción se guarda y se puede eliminar fácilmente, si es necesario
- Filtra los elementos mediante un buscador. Perfecto cuando tengas una larga lista de opciones (como todos los paises del mundo)
- Este plugin funciona en todos los navegadores modernos, incluyendo IE8+. Un factor positivo (o negativo) es que en los dispositivos móviles, los elementos seleccionados, vuelven a su forma nativa, dejando que los navegadores móviles controlen la forma de interactuar con ellos.
La amplia documentación describe todas las opciones, métodos y eventos que se puede utilizar para personalizar sus elementos. Su repositorio GitHub se actualiza continuamente con características adicionales, correcciones de errores y optimizaciones que se aplican regular en el plugin.
Select2
Select2 es un genial plugin de jQuery tanto para personalizar elementos selects, como para mejorarlos. Es decir, no solo les cambia su apariencia, sino que también extiende su funcionalidad por defecto.
Al igual que otros plugins para selects, cuenta con un montón de características personalizables, tales como:
- Posibilidad de mostrar grupos de opciones
- Múltiple selección de elementos
- Filtro para las opciones del select
- Posibilidad de cargar datos desde un origen de datos remoto (por ejemplo, una API para cambiar dinámicamente opciones)
- Soporte para tags (seleccionados de una lista predefinida / inserción de etiquetas sobre la marcha)
Select2 ha estado en desarrollo desde el año 2012. Los desarrolladores acaban de actualizar de la versión 3 a la 4, y en el proceso han reescrito el plugin para que sea más rápido y más responsive. Este plugin proporciona un alto nivel de personalización y es una gran solución si estás buscando un plugin que pueda encajar con tu proyecto.
jQuery Nice Select
Este plugin es una selecta librería de reemplazo muy ligera. jQuery Nice Select reemplaza el elemento select nativo por defecto con menús desplegables rediseñados.
No hay mucho que decir de este plugin, ya que su propósito es ser utilizado como una forma rápida de cambiar el estilo de los elementos select, proporcionando algo visualmente atractivo sin mucho esfuerzo. El plugin está siendo desarrollado de manera activa y mejorándose en su repo de GitHub y funciona muy bien tanto en navegadores móviles, como de escritorio.
Si estás buscando algo rápido y fácil que solamente personalice tus elementos select y no te apetece quebrarte la cabeza, jQuery Nice Select es tu opción.
Image Combo Box
Image Combo Box es un plugin muy sencillo que te permite definir una imagen y una descripción para cada opción dentro tus campos selects. Se utiliza principalmente para mostrar una imagen relacionada para cada opción, así que es muy útil cuando desees mostrar una representación visual de cada una de las opciones.
Este plugin tiene todas las características básicas que sueles esperar de este tipo de plugins, como navegación por teclado, una serie de eventos con los que poder controlarlo y un estilo muy sencillo para su personalizar.
Image Combo Box funciona en todos los navegadores modernos, sin embargo, no ha sido actualizado desde hace bastante tiempo y ha habido muy poca interacción en su página de GitHub. Eso no es quiere decir que sea una mala elección, sólo que tendrás que probarlo a fondo en tu proyecto puesto que creo que ya no cuenta con soporte.
Si tu objetivo principal es mostrar imágenes y/o descripciones en las opciones de tus elementos selects, entonces este plugin te vendrá como anillo al dedo.
Multiselect.js
Otra librería jQuery que te permite crear multiselecciones basándas en listas de forma rápida y sencilla. Es fácil ver lo útil que puede ser cuando echas un vistazo a sus demos. Puedes crear un único elemento select y luego moverlos fácilmente entre una y otra lista.
El plugin parece que se actualiza con cierta frecuencia por su desarrollador y la página de GitHub cuenta con montones de tickets cerrados/resueltos.
A pesar de que algunas de las preguntas más recientes de GitHub no han sido respondidas, no debes preocuparte puesto que es bastante sólido, y cuenta con muchas opciones, métodos y eventos para que puedas gestionarlo. Funciona bien en todos los navegadores modernos y tiene su propia hoja de estilo (lo que hace muy sencilla su personalización).
Este es un buen punto de partida si lo que busca es un simple plugin de selección múltiple.
Fuente: sitepoint.com