Eine Komponente für Bootstrap

Multi-Select-Typeahead für Bootstrap Framework

Christoph Schäfer · April 2013 in Expertise

Der heiße Scheiß von damals

Dieser Artikel gehört zu unserem Frühwerk, das bedeutet: Damals waren die beschriebenen Sachverhalte aktuell, jetzt haben sie wahrscheinlich schon etwas Staub angesetzt.

In diesem Artikel wird kurz erklärt, wie das Bootstrap-Typeahead um eine Tag-Funktion erweitert werden kann. Es wird somit zu einem Multi-Select bzw. einem Multi-Select-Typeahead.

Typeaheads sind als UI-Elemente (User Interface-Elemente) weit verbreitet. Man kennt sie zum Beispiel von der Google-Suche oder von Amazon. Sie ermöglichen es dem User, aus einer Summe von Vorschlägen zu wählen und die Eingabe automatisch zu vervollständigen.

Dies vereinfacht die Eingabe in dreierlei Hinsicht:

  • Tippfehler werden umgangen und somit die Qualität bzw. Konsistenz der Eingaben verbessert.
  • Es sind weniger Tastenanschläge nötig, um einen Suchbegriff zu verwenden.
  • Es werden Optionen angezeigt, die der User eventuell nicht im Kopf hat.

Diese Vorzüge machen wir uns auch in einem aktuellen Projekt zunutze. Jedoch ist hier der Anwendungsfall ein etwas komplexerer. Usern soll hier die Möglichkeit gegeben werden, Elemente mit Tags zu versehen. Die Tags wiederum sollen durch ein Typeahead vervollständigt werden. Ebenfalls soll es möglich sein, Tags per Mausklick oder mit der Löschtaste wieder zu entfernen.

Anspruchsvoll wird die Kombination aus Typeahead und Tag in der Umsetzung. Schließlich gibt es kein HTML-Input-Element, das Tags oder andere HTML-Auszeichnungen im Inneren zulässt. Unsere Lösung besteht in der Kombination verschiedener Elemente.

Mittels CSS werden alle Eigenschaften des Input-Elements input, die den Rahmen (Border) betreffen, entfernt. Der umliegende Container div wird dafür mit den Rahmeneigenschaften ausgestattet, die ihn als Input-Element erscheinen lassen. So entsteht der Eindruck, dass der umliegende Container ein Input-Element ist.
Mittels jQuery wird beim Klick auf den Container der Fokus an das Input-Element gebunden. So springt der Texteingabe-Cursor in das Input-Element, sobald der umliegende Container angeklickt wird. Weiter wird eine Funktion hinzugefügt, die beim Bestätigen von Eingaben ein entsprechendes HTML-Element li vor dem Input-Element einfügt. Zur Verbesserung der Usability werden zwei weitere Funktionen erstellt. Eine löscht das letzte Tag beim Betätigen der Löschtaste, die andere vergrößert das Input-Element immer auf die volle Breite des umliegenden Containers.

Die Bootstrap-Komponente „Typeahead“, kann unter twitter.github.io/bootstrap/customize.html auch einzeln heruntergeladen werden. Alternativ wird das gesamte Bootstrap-JS geladen.

Schön, dass Sie hier sind!

Auch wir können auf Kekse nicht verzichten! Unsere Website nutzt Cookies. Die schmecken zwar nicht nach Schokolade, sorgen aber für ein gutes Nutzererlebnis. Weitere Informationen finden Sie auf unserer Datenschutz-Seite oder in unserem Impressum.

Wählen Sie Ihre Lieblings-Cookies

Unbedingt erforderliche Cookies

Immer aktiv

Diese Cookies sind zwingend erforderlich, damit unsere Website wie gewünscht funktioniert. Wir speichern zum Beispiel Ihre Cookie-Präferenzen in einem Cookie ;-) Genauso speichern, wenn Sie ein Overlay geschlossen haben. Wichtig zu wissen: Wir speichern keine personenbezogenen Daten in diesen Cookies, sondern nur Werte nach dem Muster 0 oder 1.

Leistungs-Cookies

Darf’s etwas mehr sein? Diese Cookies verwenden wir, um die Leistung unserer Website zu verbessern. Wir setzen Cookies, um zu verstehen wie sich Nutzer über unsere Website bewegen und welche Seiten sie aufrufen. Wir verwenden hierzu Google Analytics und Hotjar.

Cookies für Marketing-Zwecke

Marketing-Cookies nutzen wir, um mit anderen Plattformen zu kommunizieren. Wenn wir Werbung in Sozialen Netzwerken, z. B. bei Facebook oder LinkedIn schalten, helfen sie uns, die richtigen Nutzer zu finden.