Nel mese di maggio, abbiamo rilasciato i nostri report dettagliati sul tempo migliorati, che includevano un'interfaccia ottimizzata per filtrare i dati nel tuo report. I filtri rappresentano un miglioramento significativo rispetto alle normali select box HTML, tanto che abbiamo deciso di condividere il loro codice con il mondo. Oggi, li rilasciamo come un plug-in che chiamiamo Chosen (disponibile per jQuery e Prototype).

Quando si costruisce un modulo HTML, le select box sono spesso utilizzate per presentare un lungo elenco di opzioni perché non occupano molto spazio. Tuttavia, quando un elemento select include più di una manciata di opzioni, diventa difficile per l'utente navigare. Digitare in un campo non sempre funziona come previsto (e molti utenti non sono nemmeno a conoscenza di questa opzione) e scorrere tra decine o centinaia di scelte è lento e noioso. Questi problemi si amplificano ulteriormente quando l'ordine delle opzioni non è immediatamente chiaro.

Chosen mira a migliorare le select box aggiungendo filtri basati sulla ricerca. Quando un utente clicca su un elemento Chosen, il cursore viene posizionato in un campo di ricerca. Man mano che l'utente digita, le opzioni che non corrispondono ai termini di ricerca vengono nascoste, lasciando solo i risultati utili. Gli utenti possono selezionare la loro scelta proprio come in un elemento select standard: evidenziare e cliccare con il mouse o utilizzare la tastiera per navigare tra le scelte (le frecce su e giù cambiano l'evidenziazione e invio seleziona).

Inoltre, gli elementi select multipli ottengono un'interfaccia migliorata per visualizzare le opzioni selezionate. Le opzioni selezionate dagli utenti vengono visualizzate come riquadri nella parte superiore dell'elemento e sono sempre visibili. Possono essere rimosse con un semplice clic o utilizzando il tasto backspace.

Lavorare con Chosen

Per gli sviluppatori, utilizzare Chosen è semplicissimo. Chosen funziona migliorando progressivamente un elemento select HTML standard, quindi non è necessario apportare modifiche al backend per gestire i dati passati. Le opzioni selezionate tramite un campo Chosen cambieranno il campo HTML (ora nascosto) e i dati verranno inviati al momento dell'invio del modulo in modo normale.

Abbiamo scritto Chosen in CoffeeScript, che fornisce una sintassi molto più leggibile per scrivere javascript. Poiché CoffeeScript rende molto più semplice mantenere javascript orientato agli oggetti e indipendente dal framework, siamo stati in grado di utilizzare gran parte dello stesso codice come base per entrambe le versioni jQuery e Prototype del plug-in. Quando prendi il codice sorgente di Chosen, otterrai anche la versione CoffeeScript.

Vuoi provarlo? Scarica il codice sorgente su github.

Open source, FTW

Harvest si basa quotidianamente sui contributi della comunità del software open source e siamo entusiasti di restituire. Manteniamo un numero di progetti open source e intendiamo continuare ad aggiungere a quella collezione. Ti incoraggiamo a clonare, forkare e contribuire a Chosen o a uno dei nostri progetti.

Se lavorare con un grande team di sviluppo e condividere il lavoro con il mondo ti sembra interessante, perché non unirti a noi? Stiamo cercando alcuni sviluppatori talentuosi.