In mei hebben we onze verbeterde gedetailleerde tijdrapporten uitgebracht, met een verbeterde interface voor het filteren van de gegevens in je rapport. De filters zijn een aanzienlijke verbetering ten opzichte van reguliere HTML-selectievakken, en daarom delen we de code met de wereld. Vandaag lanceren we deze als een plug-in die we Chosen noemen (beschikbaar voor jQuery en Prototype).

Bij het bouwen van een HTML-formulier worden selectievakken vaak gebruikt om een lange lijst met opties weer te geven, omdat ze niet veel ruimte innemen. Zodra een select-element echter meer dan een handvol opties bevat, wordt het moeilijk voor een gebruiker om te navigeren. Typen in een veld werkt niet altijd zoals verwacht (en veel gebruikers zijn zich niet eens bewust van deze optie) en scrollen door tientallen of honderden keuzes is traag en vervelend. Deze problemen worden vooral vergroot wanneer de volgorde van opties niet meteen duidelijk is.

Gekozen Selects

Chosen heeft als doel selectievakken te verbeteren door zoekgebaseerd filteren toe te voegen. Wanneer een gebruiker in een Chosen-element klikt, wordt de cursor in een zoekveld geplaatst. Terwijl de gebruiker typt, worden opties die niet overeenkomen met de zoektermen verborgen, waardoor alleen nuttige resultaten zichtbaar blijven. Gebruikers kunnen hun keuze selecteren zoals bij een standaard select-element – markeren en klikken met de muis of de toetsenbord gebruiken om keuzes te navigeren (pijltjes omhoog en omlaag veranderen de markering en enter selecteert).

Bovendien krijgen meerdere select-elementen een verbeterde interface voor het weergeven van geselecteerde opties. Door de gebruiker geselecteerde opties worden als vakken bovenaan het element weergegeven en zijn altijd zichtbaar. Ze kunnen met een enkele klik of met backspace worden verwijderd.

Werken met Chosen

Voor ontwikkelaars is het gebruik van Chosen heel eenvoudig. Chosen werkt door een standaard HTML-select-element geleidelijk te verbeteren, zodat er geen backend-wijzigingen nodig zijn om doorgegeven gegevens te verwerken. Opties die via een Chosen-veld zijn geselecteerd, zullen het (nu verborgen) HTML-veld veranderen en gegevens worden op de gebruikelijke manier doorgegeven bij het indienen van het formulier.

We hebben Chosen geschreven in CoffeeScript, wat een veel leesbaardere syntaxis biedt voor het schrijven van javascript. Aangezien CoffeeScript het onderhouden van framework-onafhankelijke, objectgeoriënteerde javascript veel gemakkelijker maakt, konden we veel van dezelfde code als basis gebruiken voor zowel onze jQuery- als Prototype-versies van de plug-in. Wanneer je de bron voor Chosen downloadt, krijg je ook de CoffeeScript-versie.

Wil je het proberen? Pak de bron op github.

Open source, FTW

Harvest vertrouwt dagelijks op de bijdragen van de open source softwaregemeenschap en we zijn enthousiast om iets terug te geven. We onderhouden een aantal open source projecten en zijn van plan om die collectie verder uit te breiden. We moedigen je aan om Chosen of een van onze projecten te klonen, te forken en bij te dragen.

Als werken met een geweldig ontwikkelingsteam en het delen van werk met de wereld jouw ding is, waarom sluit je je dan niet bij ons aan? We zijn op zoek naar een paar geweldige ontwikkelaars.