Chosen jQuery para listas desplegables

  • Por
Plugin jQuery que te ofrece una serie de utilidades imperdibles para mejorar el aspecto y la funcionalidad de las listas desplegables o campos SELECT en sitios web.
14/05/2014 -

Este artículo breve sirve para destacar un plugin que hemos conocido recientemente, presentado en uno de los hangouts de DesarrolloWeb.com, y nos sirve de mucha utilidad en cualquier tipo de proyecto. Se trata de Chosen, un desarrollo listo para ser incorporado en cualquier proyecto y que te facilita mucho trabajo con formularios avanzados.

Chosen es un plugin de jQuery que crea una infraestructura avanzada para campos SELECT de formulario y los hace más sencillos de utilizar "user-friendly", sobre todo aquellos que tienen mucha cantidad de elementos que desplegar. Como todo plugin jQuery es muy fácil de usar, por lo que merece la pena tenerlo entre tus recursos para usar en los sitios web donde lo necesites.

En la página del propio plugin encontrarás muchos ejemplos de implementación que pueden ser muy ilustradores sobre las posibilidades de este componente jQuery. Puedes acceder a ella en http://harvesthq.github.io/chosen/

Tienes alternativas de funcionalidad como:

Convertir un campo select simple en un campo select con buscador de elementos.
Convertir un campo de select múltiple en un campo de select simple donde puedes seleccionar varios elementos y se van adjuntando a la lista de items seleccionados, como si fueran etiquetas que se pueden poner y quitar.
Implementar grupos entre los elementos del select, de modo que puedas encontrar los elementos con mayor facilidad gracias a la jerarquización.
Habilitar o desabilitar elementos de manera avanzada, según vas seleccionando unos, para que no puedas volver a marcarlos.

El resultado de tu campo select dependerá de cómo invoques al plugin, pero para transformar un campo select en uno amigable al usuario deberías:

1) Cargar jQuery
2) Cargar el script del plugin Chosen
3) Invocarlo sobre el elemento que deses.

$("#mi-elmento-select").chosen()

La cantidad de opciones con la que puedes configurar la interfaz es enorme. Puedes verla en esta página, http://harvesthq.github.io/chosen/options.html donde encontrarás tanto las opciones disponibles para el campo select de manera global como para los atributos "data-type" que te permiten configurar el campo select directamente sobre tu código HTML5. También encontrarás allí una serie de clases (class CSS) con las formatear fácilmente los campos, así como una lista de eventos personalizados que podrías definir para implementar comportamientos dinámicos como respuesta a las acciones del usuario.

Es un plugin jQuery muy recomendable que te resultará de ayuda y que te vendrá bien tener a mano.