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

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 über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.

Sortiert nach:   neueste | älteste | beste Bewertung
Fumar Porros
Gast
Fumar Porros
3 Jahre 2 Monate her

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…

Dieter Petereit
Gast
3 Jahre 2 Monate her

Ja, das CSS ist nicht auf Optik angelegt ;-)

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen