Em maio, lançamos nossos relatórios de tempo detalhados aprimorados, que incluíam uma interface melhorada para filtrar os dados do seu relatório. Os filtros são uma melhoria tão significativa em relação às caixas de seleção HTML comuns que decidimos compartilhar seu código com o mundo. Hoje, estamos lançando-os como um plug-in que chamamos de Chosen (disponível para jQuery e Prototype).

Ao construir um formulário HTML, as caixas de seleção são frequentemente usadas para apresentar uma longa lista de opções, pois não ocupam muito espaço. No entanto, uma vez que um elemento de seleção inclui mais do que algumas opções, torna-se difícil para o usuário navegar. Digitar em um campo nem sempre funciona como esperado (e muitos usuários nem estão cientes dessa opção) e rolar por dezenas ou centenas de escolhas é lento e tedioso. Esses problemas são especialmente amplificados quando a ordem das opções não é imediatamente clara.

Chosen visa melhorar as caixas de seleção adicionando filtragem baseada em busca. Quando um usuário clica em um elemento Chosen, o cursor é colocado em um campo de busca. À medida que o usuário digita, as opções que não correspondem aos termos de busca são ocultadas, deixando apenas os resultados úteis. Os usuários podem selecionar sua escolha da mesma forma que um elemento de seleção padrão – destacando e clicando com o mouse ou usando o teclado para navegar pelas opções (as setas para cima e para baixo mudam o destaque e o enter seleciona).

Além disso, múltiplos elementos de seleção recebem uma interface aprimorada para exibir as opções selecionadas. As opções selecionadas pelo usuário são exibidas como caixas na parte superior do elemento e estão sempre visíveis. Elas podem ser removidas com um único clique ou usando a tecla backspace.

Trabalhando com Chosen

Para os desenvolvedores, usar o Chosen é muito fácil. O Chosen funciona aprimorando progressivamente um elemento de seleção HTML padrão, portanto, nenhuma alteração no backend precisa ser feita para lidar com os dados passados. As opções selecionadas através de um campo Chosen mudarão o campo HTML (agora oculto) e os dados serão enviados no envio do formulário de forma normal.

Escrevemos o Chosen em CoffeeScript, que fornece uma sintaxe muito mais legível para escrever javascript. Como o CoffeeScript torna a manutenção de javascript orientado a objetos independente de frameworks muito mais fácil, conseguimos usar muito do mesmo código como base para nossas versões jQuery e Prototype do plug-in. Quando você pegar o código-fonte do Chosen, também receberá a versão em CoffeeScript.

Quer experimentar? Baixe o código-fonte no github.

Código aberto, para ganhar

A Harvest conta com as contribuições da comunidade de software de código aberto diariamente e estamos animados para retribuir. Mantemos um número de projetos de código aberto e planejamos continuar adicionando a essa coleção. Incentivamos você a clonar, bifurcar e contribuir para o Chosen ou qualquer um de nossos projetos.

Se trabalhar com uma ótima equipe de desenvolvimento e compartilhar o trabalho com o mundo soa como a sua praia, por que não se juntar a nós? Estamos procurando alguns ótimos desenvolvedores.