Quick-Tipp: JQuery-Library Chosen erhöht Usability-Qualität für Select-Boxen

Die JQuery-Library Chosen stellt das nervende Select-Box-UID auf den Kopf und erweitert die Interaktionsmöglichkeiten um beispielsweise den Komfort einer inkrementellen Suche, Single-Select und einem kompakten Multi-Select mit Filter-Badges (Filter-Token).

Die inkrementelle Suche speist sich aus einem vorhandenen Bestand an Begriffen, denen aus dem Select-Option-Markup, wobei zusammen maximal 10 Vorschläge angezeigt werden. Dadurch wirkt das UI aufgeräumt und gleichzeitig komfortabel.

Wie macht Chosen das?

Chosen ist eine JQuery-Library und ist dazu geeignet das DOM zu manipulieren. Chosen geht dabei so vor, wie viele andere JQuery-Erweiterungen. Es verändert das HTML-Markup einer benannten Select-Box, bzw. ergänzt es um die notwendigen Elemente, wie Suchfeld,  Links und um CSS für Icons und Gesamtaufbau. Vergleiche dazu diesen Quell-Code:

Aus nachfolgendem originalem Markup am Beispiel Single-Select-Box…

<select data-placeholder="Choose a Country..." class="select" tabindex="1">
            <option value=""></option>
            <option value="United States">United States</option>
            <option value="United Kingdom">United Kingdom</option>
            ...
</select>

wird folgendes nach dem Einsatz von „Chosen“:

<select data-placeholder="Choose a Country..." class="chosen-select" tabindex="-1" style="display: none;">
    <option value=""></option>
    <option value="United States">United States</option>
    <option value="United Kingdom">United Kingdom</option>
    ...
</select>
<div class="chosen-container chosen-container-single" title="" style="width: 350px;">
    <a class="chosen-single chosen-default">
    <span>Choose a Country...</span>
    <div>
      <b></b>
    </div>
  </a>
  <div class="chosen-drop">
    <div class="chosen-search">
      <input class="chosen-search-input" autocomplete="off" tabindex="2" type="text">
    </div>
    <ul class="chosen-results">
      <li class="active-result" style="" data-option-array-index="1">United States</li>
      <li class="active-result" style="" data-option-array-index="2">United Kingdom</li>
      ...
    </ul>
  </div>
</div>

Der gesamte Bereich der originalen Select-Box wird per display:none: ausgeblendet. Stattdessen wird ein neues Pattern bestehend aus diversen neuen Elementen wie DIVs und ULs generiert und dass die Basis-Funktion der Select-Box über ein verbessertes Interaktions-Muster abbildet. Aufgrund seiner geringen Größe und der schnellen Manipulation über das DOM stellt der User beim Aufruf einer entsprechenden HTML-Seite oder Web-App keine Verzögerung fest.

Das Interaktionsmuster

Single-Select

Bei Klick auf die Select-Box, öffnet sich neben einer Liste der zur Verfügung stehenden Optionen eine zu oberst angeordnete Suchbox. Bei Klick in die Suchbox und Eingabe eines ersten Buchstaben, werden alle Optionen entsprechend gefiltert. Die Textbox bleibt zur weiteren Eingabe von Buchstaben oder der Auswahl von Optionen erhalten. Im nächsten Schritt kann man per Maus oder Tastatur den gewünschten Eintrag aus der Liste über nehmen. Die Select-Box wird geschlossen und der Begriff übernommen. Der Vorgang kann erneut gestartet werden. Bei Single-Select-Boxen wird bei erneuter Betätigung der Begriff ausgetauscht, bei Multi-Select-Boxen werden die Begriffe als Filter-Badges gesammelt.

Multi-Select

Das Interaktionsmuster für Multi-Select ist ähnlich aufgebaut, sammelt jedoch alle geklickten Einträge als Filter-Badge (Filter-Token).

Wie gewohnt kann man diese Einträge über das Close-Icon wieder entfernen. Auf der Webseite von „Chosen“ kann man entsprechende Demos einsehen.

Setup

Die Einbindung von Chosen ist simple.

1. Lade das Plugin und kopiere die Chosen-Dateien in dein JS-Verzeichnis
2. Passe dein HTML-Markup an, damit das Chosen-Script geladen wird
3. Aktiviere das Plugin für deine Select-Box, indem du die entsprechenden Klassen .chosen-select zuweist (siehe Markup weiter oben).
4. Integriere folgende Zeile in dein Javascript: $(".chosen-select").chosen() um die Manipulation auszulösen.

Chosen ist unter der MIT Lizenz verfügbar.

Zusammenfassung

Autor-Bewertung

Leser-Bewertung

5 based on 1 votes

Software-Name

Chosen (v1.8.2)

Software-System

Browser

Software Category

jQuery plugin

Preis

€ 0

Herstellerseite

https://harvesthq.github.io/chosen/