En mayo, lanzamos nuestros informes de tiempo detallados mejorados, que incluían una interfaz optimizada para filtrar los datos de tu informe. Los filtros son una mejora tan significativa sobre las cajas de selección HTML estándar que decidimos compartir su código con el mundo. Hoy, los lanzamos como un complemento que llamamos Chosen (disponible para jQuery y Prototype).

Al construir un formulario HTML, las cajas de selección se utilizan a menudo para presentar una larga lista de opciones porque no ocupan mucho espacio. Sin embargo, una vez que un elemento de selección incluye más de unas pocas opciones, se vuelve difícil de navegar para el usuario. Escribir en un campo no siempre funciona como se espera (y muchos usuarios ni siquiera son conscientes de esta opción) y desplazarse por docenas o cientos de elecciones es lento y tedioso. Estos problemas se amplifican especialmente cuando el orden de las opciones no es inmediatamente claro.

Chosen busca mejorar las cajas de selección añadiendo filtrado basado en búsqueda. Cuando un usuario hace clic en un elemento Chosen, su cursor se coloca en un campo de búsqueda. A medida que el usuario escribe, las opciones que no coinciden con los términos de búsqueda se ocultan, dejando solo los resultados útiles. Los usuarios pueden seleccionar su opción de la misma manera que un elemento de selección estándar: resaltando y haciendo clic con el ratón o usando el teclado para navegar entre las opciones (las flechas arriba y abajo cambian el resaltado y enter selecciona).

Además, los elementos de selección múltiples obtienen una interfaz mejorada para mostrar las opciones seleccionadas. Las opciones seleccionadas por el usuario se muestran como cuadros en la parte superior del elemento y siempre son visibles. Pueden eliminarse con un solo clic o usando la tecla de retroceso.

Trabajando con Chosen

Para los desarrolladores, usar Chosen es muy fácil. Chosen funciona mejorando progresivamente un elemento de selección HTML estándar, por lo que no es necesario realizar cambios en el backend para manejar los datos enviados. Las opciones seleccionadas a través de un campo Chosen cambiarán el campo HTML (ahora oculto) y los datos se enviarán en el formulario de manera normal.

Escribimos Chosen en CoffeeScript, que proporciona una sintaxis mucho más legible para escribir javascript. Dado que CoffeeScript facilita el mantenimiento de javascript orientado a objetos independiente de frameworks, pudimos utilizar gran parte del mismo código como base para nuestras versiones de jQuery y Prototype del complemento. Cuando obtengas el código fuente de Chosen, también recibirás la versión en CoffeeScript.

¿Quieres probarlo? Obtén el código fuente en github.

Código abierto, ¡sí!

Harvest depende de las contribuciones de la comunidad de software de código abierto a diario y estamos emocionados de retribuir. Mantenemos un número de proyectos de código abierto y planeamos seguir añadiendo a esa colección. Te animamos a clonar, bifurcar y contribuir a Chosen o a cualquiera de nuestros proyectos.

Si trabajar con un gran equipo de desarrollo y compartir el trabajo con el mundo suena como lo tuyo, ¿por qué no te unes a nosotros? Estamos buscando algunos grandes desarrolladores.