Im Mai haben wir unsere verbesserten detaillierten Zeitberichte veröffentlicht, die eine optimierte Benutzeroberfläche zum Filtern der Daten in Ihrem Bericht enthalten. Die Filter sind eine so bedeutende Verbesserung gegenüber regulären HTML-Auswahlfeldern, dass wir uns entschieden haben, ihren Code mit der Welt zu teilen. Heute veröffentlichen wir sie als Plug-in, das wir Chosen nennen (verfügbar für jQuery und Prototype).

Bei der Erstellung eines HTML-Formulars werden Auswahlfelder oft verwendet, um eine lange Liste von Optionen darzustellen, da sie nicht viel Platz einnehmen. Sobald ein Auswahlfeld jedoch mehr als eine Handvoll Optionen enthält, wird es für den Benutzer schwierig, sich zurechtzufinden. Das Tippen in ein Feld funktioniert nicht immer wie erwartet (und viele Benutzer sind sich dieser Option nicht einmal bewusst), und das Scrollen durch Dutzende oder Hunderte von Auswahlmöglichkeiten ist langsam und mühsam. Diese Probleme werden besonders deutlich, wenn die Reihenfolge der Optionen nicht sofort klar ist.

Chosen Auswahl

Chosen zielt darauf ab, Auswahlfelder zu verbessern, indem es eine suchbasierte Filterung hinzufügt. Wenn ein Benutzer in ein Chosen-Element klickt, wird der Cursor in ein Suchfeld gesetzt. Während der Benutzer tippt, werden Optionen, die nicht mit den Suchbegriffen übereinstimmen, ausgeblendet, sodass nur nützliche Ergebnisse angezeigt werden. Benutzer können ihre Auswahl genauso treffen wie bei einem Standard-Auswahlfeld – markieren und mit der Maus klicken oder die Tastatur verwenden, um durch die Optionen zu navigieren (Pfeiltasten nach oben und unten ändern die Markierung und Enter wählt aus).

Zusätzlich erhalten mehrere Auswahlfelder eine verbesserte Benutzeroberfläche zur Anzeige der ausgewählten Optionen. Vom Benutzer ausgewählte Optionen werden als Kästchen oben im Element angezeigt und sind immer sichtbar. Sie können mit einem einzigen Klick oder durch Drücken der Rücktaste entfernt werden.

Arbeiten mit Chosen

Für Entwickler ist die Verwendung von Chosen kinderleicht. Chosen funktioniert, indem es ein Standard-HTML-Auswahlfeld schrittweise verbessert, sodass keine Backend-Änderungen erforderlich sind, um übergebene Daten zu verarbeiten. Optionen, die über ein Chosen-Feld ausgewählt werden, ändern das (jetzt ausgeblendete) HTML-Feld, und die Daten werden beim Absenden des Formulars auf normale Weise übermittelt.

Wir haben Chosen in CoffeeScript geschrieben, was eine viel lesbarere Syntax für das Schreiben von JavaScript bietet. Da CoffeeScript die Wartung von frameworkunabhängigem, objektorientiertem JavaScript erheblich erleichtert, konnten wir einen Großteil des gleichen Codes als Basis für unsere jQuery- und Prototype-Versionen des Plug-ins verwenden. Wenn Sie den Quellcode für Chosen herunterladen, erhalten Sie auch die CoffeeScript-Version.

Wollen Sie es ausprobieren? Laden Sie den Quellcode auf GitHub herunter.

Open Source, FTW

Harvest ist täglich auf die Beiträge der Open-Source-Software-Community angewiesen und wir freuen uns, etwas zurückzugeben. Wir pflegen eine Anzahl von Open-Source-Projekten und planen, diese Sammlung weiter auszubauen. Wir ermutigen Sie, Chosen oder eines unserer Projekte zu klonen, zu forken und beizutragen.

Wenn es Ihnen gefällt, mit einem großartigen Entwicklungsteam zu arbeiten und Ihre Arbeit mit der Welt zu teilen, warum schließen Sie sich uns nicht an? Wir suchen nach ein paar großartigen Entwicklern.