Chosen: características y ejemplos de uso

Esos malditos select que tanto odié hoy vuelven a ser de mi agrado. Cuándo tienes una lista de opciones relativamente grande, los elementos select se vuelven de una usabilidad bastante pobre. Chosen es un plugin para jQuery que hace de estos elementos una interacción amigable con el usuario y además ofrece un control absoluto sobre su diseño (el aspecto de los elementos select no son totalmente controlables con CSS). En resumen, estas serían sus principales características:

Control absoluto del diseño del elemento select
Selección y deselección de opciones amigable. Olvídate de volver a pulsar la tecla «Ctrl».
Opción de búsqueda entre las opciones, muy útil en select con muchas opciones, en especial de selección múltiple. Incluye sugerencias de búsqueda tomadas de las lista de opciones del select.

¿Cómo se usa?

Para empezar descarga Chosen para jQuery desde Github. Recuerda que Chosen es un plugin para jQuery, por lo que tendrás que cargar jQuery en tú página antes que Chosen. También es necesario cargar el CSS que viene en el paquete. Una vez hecho esto, basta inicializar Chosen mediante $(selector).chosen(), donde selector es un selector jQuery válido del elemento select en el que deseas aplicar Chosen. Por ejemplo, si el select tiene class="chosen":

<head>
    <link rel="stylesheet" href="chosen.css" type="text/css" />
    <script src="jquery.min.js"></script>
    <script src="chosen.jquery.js"></script>
    <script>
        $(document).ready(function(){
            $(".chosen").chosen();
       });
    </script>
</head>

Chosen ofrece muchas opciones, que veremos a continuación, y podemos configurarlas de este modo:

$(".chosen").chosen({opcion1: "Valor", opcion2: "Valor2", etc});

Ejemplos de uso

En cualquier caso el HTML del elemento select se construye de la misma forma que lo has hecho siempre. Para los ejemplos de este tutorial voy a utilizar las siguientes listas de selección:

<!-- selección única -->
<select name="miselect" class="chosen" data-placeholder="Elige un color">
    <option value=""></option>
    <option value="azul">Azul</option>
    <option value="amarillo">Amarillo</option>
    <option value="blanco">Blanco</option>
    <option value="gris">Gris</option>
    <option value="marron">Marrón</option>
    <option value="naranja">Naranja</option>
    <option value="negro">Negro</option>
    <option value="rojo">Rojo</option>
    <option value="verde">Verde</option>
    <option value="violeta">Violeta</option>
</select>

<!-- selección múltiple -->
<select cname="miselect[]" lass="chosen" data-placeholder="Elige tus colores favoritos" multiple>
    <option value="azul">Azul</option>
    <option value="amarillo">Amarillo</option>
    <option value="blanco">Blanco</option>
    <option value="gris">Gris</option>
    <option value="marron">Marrón</option>
    <option value="naranja">Naranja</option>
    <option value="negro">Negro</option>
    <option value="rojo">Rojo</option>
    <option value="verde">Verde</option>
    <option value="violeta">Violeta</option>
</select>

Antes de seleccionar ninguna opción podemos mostrar un texto personalizado tomado del valor del atributo data-placeholder. Nota como en el select de selección única la primera opción no tiene valor ni texto; esto es necesario para utilizar el texto personalizado si el select es de selección única.

Ejemplo: select de selección única

En los select de selección única la función de deselección no viene activada por defecto. Si queremos activar esta función debemos poner allow_single_deselect: true

$(".chosen").chosen({allow_single_deselect: true});

Si además queremos, por ejemplo, desactivar la opción de búsqueda, utilizaremos:

$(".chosen").chosen({allow_single_deselect: true, disable_search: true});

También se puede configurar chosen para que utilice la función de búsqueda sólo si la lista de opciones supera un cierto valor. Por ejemplo, si queremos que la función de búsqueda solo aparezca si hay más de 5 opciones:

$(".chosen").chosen({disable_search_threshold: 5});

Ejemplo: selección múltiple

La función de deselección viene activada por defecto para los select con selección múltiple y no se puede desactivar ni tampoco la función de búsqueda.

Una opción muy interesante en selección múltiple es poder limitar el número máximo de selecciones:

$(".chosen").chosen({max_selected_options: 3});

Y si queremos lanzar alguna función cuándo se alcanza el número máximo de selecciones:

$(".chosen").bind("chosen:maxselected", function () {
    alert("Máximo número de elementos seleccionado")
});

Demo

Espero que Chosen para jQuery te guste tanto como a mí y vuelvas a disfrutar de los elementos select. Si quieres más información y más ejemplos, visita este link.