Anonim

Las selecciones desplegables en HTML son algunos de los elementos más fáciles de usar de forma nativa. Diseñarlos es una molestia y, en su funcionalidad básica, no son muy útiles a menos que tenga una cantidad limitada de artículos con una cantidad limitada de necesidades.

Ahí es donde entra en juego Chosen. Es una biblioteca de JavaScript que hace que la experiencia desplegable se vea mucho mejor, así como también mucho mejor desde una perspectiva de funcionalidad.

Arriba puede ver la funcionalidad predeterminada elegida. Se ve muy bien y, de manera predeterminada, tiene un mecanismo de búsqueda simple para filtrar los resultados en caso de que tenga una gran cantidad de elementos en su menú desplegable. Primero, incluya los archivos javascript y css. Luego, inicialícelos con el siguiente código.

Es tan fácil como eso. Ahora pasemos al siguiente nivel, ¿y si quisiera poder cambiar la funcionalidad del menú desplegable para permitir múltiples selecciones? Busque "Rojo" a continuación, luego presione enter, busque "Azul", luego presione enter. Ahora puede eliminarlos con la misma facilidad de su selección presionando la X o la tecla de retroceso dos veces.


Todo lo que tiene que hacer es pasar la opción múltiple en la llamada de la selección como se muestra a continuación. No hay cambios en el javascript, se inicializa exactamente de la misma manera.