En mai, nous avons lancé nos rapports de temps détaillés améliorés, qui incluaient une interface améliorée pour filtrer les données de votre rapport. Les filtres représentent une amélioration significative par rapport aux boîtes de sélection HTML classiques, c'est pourquoi nous avons décidé de partager leur code avec le monde. Aujourd'hui, nous les publions sous forme de plug-in que nous appelons Chosen (disponible pour jQuery et Prototype).

Lors de la création d'un formulaire HTML, les boîtes de sélection sont souvent utilisées pour présenter une longue liste d'options car elles ne prennent pas beaucoup de place. Cependant, une fois qu'un élément de sélection contient plus d'une poignée d'options, il devient difficile pour un utilisateur de naviguer. Taper dans un champ ne fonctionne pas toujours comme prévu (et de nombreux utilisateurs ne sont même pas conscients de cette option) et faire défiler des dizaines ou des centaines de choix est lent et fastidieux. Ces problèmes sont particulièrement amplifiés lorsque l'ordre des options n'est pas immédiatement clair.

Chosen vise à améliorer les boîtes de sélection en ajoutant un filtrage basé sur la recherche. Lorsqu'un utilisateur clique sur un élément Chosen, son curseur est placé dans un champ de recherche. Au fur et à mesure que l'utilisateur tape, les options qui ne correspondent pas aux termes de recherche sont cachées, ne laissant que les résultats utiles. Les utilisateurs peuvent sélectionner leur choix de la même manière qu'un élément de sélection standard : surligner et cliquer avec la souris ou utiliser le clavier pour naviguer dans les choix (les flèches haut et bas changent le surlignage et entrer sélectionne).

De plus, plusieurs éléments de sélection bénéficient d'une interface améliorée pour afficher les options sélectionnées. Les options choisies par l'utilisateur sont affichées sous forme de cases en haut de l'élément et sont toujours visibles. Elles peuvent être supprimées d'un simple clic ou en utilisant la touche retour arrière.

Travailler avec Chosen

Pour les développeurs, utiliser Chosen est un jeu d'enfant. Chosen fonctionne en améliorant progressivement un élément de sélection HTML standard, donc aucune modification côté serveur n'est nécessaire pour gérer les données transmises. Les options sélectionnées via un champ Chosen modifieront le champ HTML (maintenant caché) et les données seront transmises lors de la soumission du formulaire de manière normale.

Nous avons écrit Chosen en CoffeeScript, qui offre une syntaxe beaucoup plus lisible pour écrire du javascript. Comme CoffeeScript facilite la maintenance d'un javascript orienté objet indépendant du framework, nous avons pu utiliser une grande partie du même code comme base pour nos versions jQuery et Prototype du plug-in. Lorsque vous récupérez la source de Chosen, vous obtiendrez également la version CoffeeScript.

Envie d'essayer ? Récupérez la source sur github.

Open source, FTW

Harvest s'appuie sur les contributions de la communauté des logiciels open source au quotidien et nous sommes ravis de redonner. Nous maintenons un certain nombre de projets open source et prévoyons de continuer à enrichir cette collection. Nous vous encourageons à cloner, forker et contribuer à Chosen ou à l'un de nos projets.

Si travailler avec une excellente équipe de développement et partager son travail avec le monde vous tente, pourquoi ne pas nous rejoindre ? Nous recherchons quelques développeurs talentueux.