Javascript

Typeahead.js für jQuery – Flexibles Autocomplete aus dem Hause Twitter

25. Februar 2013
von

Seit der Freigabe des Frameworks Bootstrap scheint Twitter mehr und mehr Freude am Gedanken des Open Sourcing zu gewinnen. Das neueste Geschenk an die freie Entwicklergemeinde hört auf den Namen Typeahead.js. Es handelt sich um ein jQuery-Plugin, das beliebige Input-Elemente mit Autovervollständigungs-Funktionalität ausrüstet. Dabei können die Daten fest hinterlegt oder aus lokalen und entfernten JSON-Files kommen.

typeahead-homepage

Typeahead.js: Autovervollständigung vom Feinsten

Typeahead.js benötigt mindestens jQuery 1.9. Es wurde im Hause Twitter entworfen, um flexible Autovervollständigung einfach implementieren zu können. Seit fünf Tagen steht die JavaScript-Lösung auf Github unter der MIT-Lizenz zur kostenlosen Verwendung in privaten, wie kommerziellen Projekten und darüber hinaus zur Mitwirkung und Erweiterung bereit.

Typeahead.js kann auf verschiedene Arten mit den Daten, die für die Autovervollständigung herangezogen werden sollen, bestückt werden. Zunächst ist es möglich, die Daten im Funktionsaufruf hart zu hinterlegen, also quasi im Quelltext der Seite fest einzutippen. Das wäre noch nicht der Rede wert, wenngleich das bisweilen, in kleineren Szenarien bereits ausreichen mag.

So sieht zum Beispiel eine fest hinterlegte Autovervollständigung aus, die die Namen der Planeten unseres Sonnensystems zur Verfügung stellen würde:

1
2
3
4
5
6
$('#input').typeahead([
    {
            name: 'planets',
            local: [ "Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune" ]
        }
    ]);

typeahead-hardcoded
Typeahead.js kann übrigens auch mit RTL-Sprachen umgehen

Mächtige Funktionen stehen jedoch ebenfalls bereit. So kann das zu durchsuchende Dataset auch ein JSON-File sein, welches entfernt auf einem externen Server liegt. Zur Performanceverbesserung kann dieses externe File wiederum per Prefetch in den localStorage geladen und von dort aus wieselflink abgefragt werden:

1
2
3
4
5
6
$('#input').typeahead([
    {
        name: 'countries',
        prefetch: '/countries.json',
        }
    ]);

typeahead-prefetch
Typeahead.js verarbeitet ein JSON-File lokal oder remote, in diesem Fall lokal per Prefetch

Sehr große Datasets können zudem entfernt aktiv, also im Moment der Eingabe abgefragt werden. Hierzu findet eine rasante Abfrage unter Verwendung des Parameters q?= statt. Das Abfrageergebnis erscheint als Vorschlag zur Autovervollständigung. Dieses Verhalten erreicht man, indem anstelle des im eben gezeigten Beispiel verwendeten Parameters prefetch der Parameter remote verwendet wird.

Sämtliche Methoden lassen sich kombinieren, um die bestmögliche Flexibilität, aber auch Performance der Gesamtlösung zu gewährleisten. Die zu wählende Konfiguration hängt ganz vom konkreten Projekt ab. Dabei ist es auch möglich, die zur Autovervollständigung heran zu ziehenden Daten aus verschiedenen Datasets zu ziehen. Ebenso ist es vorgesehen, mehrere Autocompletes auf einer Seite unterzubringen, sei es mit der gleichen Datenbasis oder auch einer oder mehrerer anderer.

Auf der Seite des Users verhält sich Typeahead.js mustergültig erwartungsgemäß. Im Standard wird der jeweils beste Vorschlag grau in den Hintergrund des Suchfeldes gelegt, die Vorschläge müssen dabei nicht aus einzelnen Wörtern bestehen, sondern können auch Mehrzeiler mit etwa den Basisdaten eines Twitter-Accounts oder eines Open-Source-Projekts sein, die der Nutzer dann mit den Pfeiltasten oder der Maus anwählen kann.

Typeahead.js wird zusätzlich mit einem CSS geliefert, das allerdings nicht die Optik des zu erweiternden Input-Elements antastet. Vielmehr wird über das Stylesheet lediglich die Position des Vorschlags, sowie die Dropdown-Funktionalität gesteuert. Damit das Input-Element schön aussieht, ist noch Handarbeit erforderlich. Typeahead.js erstellt statusabhängig Klassen, die dann mit eigenen Style-Definition angesprochen werden können (und müssen).

Gefällt einem Bootstrap-User nun das neue Typeahead.js so viel besser, als das bereits in Bootstrap integrierte, aber weit weniger leistungsfähige Typeahead, so bedarf es lediglich des zusätzlichen Einbindens des neuen Scripts unmittelbar nach Bootstrap. Der Rest ist Konfigurationssache.

Links zum Beitrag:

ist seit 1994 im Netz unterwegs, aber bereits seit fast 30 Jahren in der IT daheim. Seit 2008 schreibt er für Dr. Web, seit 2012 ist er Chefredakteur des Magazins. Man findet ihn auch auf Twitter und Facebook, aktiver ist er allerdings auf Google+.

Tags: , , ,

2 Kommentare zu „Typeahead.js für jQuery – Flexibles Autocomplete aus dem Hause Twitter
  1. Fumar Porros am 25. Februar 2013 um 17:36

    Cooles Teil, das ich sicher irgendwann einsetzen werde! Ich habe eben mal local ein array mit knapp 92000 Begriffen eingehängt und das PlugIn hat schnell und ohne zu mucken die entsprechend der Eingabe zugehörigen Terme gefunden. Das CSS muss allerdings schwer angepasst werden. In meiner Testumgebung zumindest war damit gar nichts anzufangen…

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!