Tokenfield für Bootstrap

Formularfelder mit Tag-Funktion – Tokenfield für Bootstrap

Stichwörter, oder so genannte Tags, sind sehr nützlich. Egal ob in einem Content-Management-System oder einer einfachen Datenbankanwendung, überall helfen sie, um Inhalte schneller wieder zu finden oder zu filtern. Wer allerdings schon einmal probiert hat, ein Tag-System sinnvoll in einem Formular einzubinden, der merkt – so einfach ist das gar nicht. Tokenfield für Bootstrap soll das ändern und vereinfachen.

Inhaltsverzeichnis

Tokenfield.js für Bootstrap im Video erklärt

In diesem Video habe ich eine kurze Zusammenfassung darüber erstellt, wie Tokenfield.js funktioniert und wie die Benutzung aussieht. Mit der Verwendung dieser Bootstrap Erweiterung ist es trotzdem noch möglich, jegliche CSS-Klassen, die Bootstrap für Formulare bietet, zu nutzen. Im folgenden wird erklärt, wie Tokenfield.js installiert wird und wie man es benutzt.

Download der Dateien und Installation im eigenen Script

Den Link zum Download findet man auf der GitHub Projekt Seite von Tokenfield. Mit dem Klick auf den Button “Download Development”, wird ein komprimierter Ordner heruntergeladen, der sämtliche Projektdateien beinhaltet. Dieser Ordner sollte im nächsten Schritt entpackt werden. Keine Sorge: Wir brauchen nur einen Bruchteil der Dateien, die im Ordner sind um es in unser eigenes Bootstrap-Projekt zu implementieren.

Welche Dateien braucht man wirklich?

Wir gehen davon aus, dass Tokenfield in einem Bootstrap-Projekt verwendet wird. Somit ist jQuery, die Bootstrap JS-Datei und die Bootstrap CSS-Datei bereits vorhanden. Aus dem heruntergeladenen und entpackten Ordner werden nun folgende Dateien wirklich benötigt:

  • dist/bootstrap-tokenfield.min.js
  • dist/css/bootstrap-tokenfield.min.css
  • dist/css/tokenfield-typeahead.min.css

Ich verwende immer gerne die “min.css”-Dateien, da diese eine kleine Dateigröße haben und somit schneller geladen werden. Die kleinere Dateigröße ergibt sich dadurch, dass alle Leerzeichen und Leerzeilen einfach entfernt werden und das gesamte JavaScript oder CSS somit ein einziger Fließtext ist.

Die JavaScript-Datei kann nun in Deinen Javascript-Ordner und die CSS-Dateien in Deinen CSS-Ordner kopiert werden. Diese müssen nun im Script importiert werden.

CSS- und JavaScript-Dateien einbinden

Die CSS-Dateien müssen im Head-Bereich der Datei eingebunden werden. Zur Sicherheit sollten diese auch nach dem Bootstrap-CSS und, wenn vorhanden, nach den eigenen Stylesheets verlinkt werden.

<link href="css/bootstrap-tokenfield.min.css" rel="stylesheet">
<link href="css/tokenfield-typeahead.min.css" rel="stylesheet">

Wird mit der Typahead-Funktion gearbeitet (Autovervollständigung), muss man sich zwischen dem jQuery UI Autocomplete oder dem Twitter Typeahead entscheiden. Bei der jQuery UI Variante muss zusätzlich ein CSS eingebunden werden.

<!-- jQuery UI CSS -->
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" type="text/css" rel="stylesheet">

Diese Datei muss nicht auf dem eigenen Server liegen. Sie wird von jQuery online bereitgestellt. Dies hat Vorteile hinsichtlich der Ladezeit, welche wir in einem extra Artikel hier auf Bootstrapaholic.de demnächst vorstellen werden und erläutern werden.

Die JavaScript-Datei sollten am Ende der Datei eingebunden werden. Dies hat ebenfalls mit der Ladezeit zu tun, da diese erst geladen werden sollten, wenn der Großteil der Datei bereits heruntergeladen und gerendert wurde. Die folgende JS-Datei muss nach der “Bootstrap.min.js” importiert werden.

<script src="js/bootstrap-tokenfield.min.js"></script>

Über dieser Einbindung muss nun entweder jQuery UI Autocomplete oder Twitter Typeahead wie folgt eingebunden werden:

<!-- jQuery UI Autocomplate -->
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<!-- ODER(!) -->

<!-- Twitter Typeahead -->
<script type="text/javascript" src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>

Tokenfield.js in eigenen Formularen benutzen

Zur Veranschaulichung habe ich ein Beispiel-Formular erstellt, welches ein Input type text enthält.

Beispiel-Formular für Tokenfield.js
Abbildung 1: Beispiel-Formular um Tokenfield.js zu testen

Wichtig hierbei ist die ID des Feldes, dass via. Tokenfield.js zu einem Feld mit AutoComplete und Tag-Funktion werden soll. Dieses Input-Feld wird dann wie folgt mit einem JavaScript am Ende der Datei angesprochen.

Tokenfield per JavaScript ansprechen
Abbildung 2: Ansprechen des Input-Felds via JavaScript

Wie auf Abbildung 2 zu sehen ist, wird mit jQuery das Input-Feld mit der ID “tokenfield” angesprochen. Mit dem Wert “autocomplete” werden nun  in “source” die Daten vorgegeben, die als Autovervollständigung angezeigt werden sollen. Mit “delay” wir festgelegt, wie viel Zeit vergehen muss, damit die Autocomplete Funktion beginnt, also wann die Vorschläge angezeigt werden sollen. 100 ist hier ein guter Wert.

Verfügbare Attribute für die Funktion tokenfield()

Attribut Typ Standard Beschreibung
tokens String, Array [] Hiermit kann man beispielsweise einem bestimmten Text, der im Feld angezeigt wird, zusätzlich einen Wert zuweisen (bsp: ID in der Datenbank).
limit int 0 Maximale Anzahl der Tags, die in das Feld geschrieben werden können.
minLength int 0 Minimale Länge eines Tags
minWidth int 60 Minimale Größe des Input-Felds
autocomplete object {} Die Autocomplete Optionen für jQuery UI
showAutocompleteOnFocus boolean false Sollen bereits beim Klick in das Feld Vorschläge erscheinen oder erst nach dem Tippen? Funktioniert nur mit jQuery UI.
typeahead array [] Optionen für Twitter Typeahead
delimiter string, array “,” Mit welchem Zeichen sollen die einzelnen Stichwörter getrennt werden? Ist vor allem wichtig, wenn diese Daten dann per PHP ausgelesen werden sollen.
beautify boolean true Somit kann auch ein Leerzeichen nach dem Komma eingegeben werden, ohne, dass dieses mit in das Stichwort übernommen wird.

Fazit zu Tokenfields.js

Ein sehr schöne und einfache Lösung, für so eine doch recht komplexe Funktion. Die Verwendung auf mobilen Endgeräten funktioniert leider nicht ganz einwandfrei, kann jedoch selber für sich entscheiden, ob die Darstellung und Verwendung in Ordnung ist oder nicht.

Du hast selbst schon Tokenfields.js getestet oder hast Fragen dazu? Ich freue mich auf Deinen Kommentar.

Du möchtest regelmäßig mit interessanten Neuigkeiten zum Thema "Twitter Bootstrap" versorgt werden? Trag Dich in den Bootstrapaholic Newsletter ein. Wir versenden keinen Spam! Du kannst Dich jederzeit austragen.

Dieser Beitrag wurde unter Formulare abgelegt am von .

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>