Automatisch vervollständigen ( autocomplete ) mit typeahead.js und ajax

Dank google hat sich jeder an automatisches vervollständigen von Suchanfragen gewöhnt.

Wenn man dieses Feature in seiner Web-Applikation anbieten möchte kann man sich ein wenig Arbeit sparen und auf typeahead.js zurückgreifen.

Da das twitter geführte GIT repo nicht mehr aktiv ist, sollte man das aktive repo von corejs nutzen.

Die momentane Dokumentation von typeahead.js beschreibt meine Meinung nach nicht ausführlich wie die asynchrone verwendung angewendet wird.

Installation mit bower:

bower install corejs-typeahead

bower installiert automatisch die neueste jquery Version - falls man eine ältere Version verwenden möchte sollte man mindestens 1.7 verwenden. Ich empfehle die stable 2.x.x

bower install jquery#^2

dann binden wir das bundle.js ein

<script type="text/javascript" src="bower_components/corejs-typeahead/dist/typeahead.bundle.js"></script>

Da ich kein bootstrap verwende, habe ich die styles in meine CSS kopiert:

.tt-query { -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .tt-hint { color: #999 } .tt-menu { /* used to be tt-dropdown-menu in older versions */ width: 422px; margin-top: 4px; padding: 4px 0; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2); -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2); box-shadow: 0 5px 10px rgba(0,0,0,.2); } .tt-suggestion { padding: 3px 20px; line-height: 24px; } .tt-suggestion.tt-cursor,.tt-suggestion:hover { color: #fff; background-color: #0097cf; } .tt-suggestion p { margin: 0; }

die PHP seite macht eine SQL Abfrage und json_decode() die formattierten Ergebnisse. Bei mir sieht das so aus:

[{"name":"foo"},{"name":"bar"},{"name":"batz"},{"name":"foobar"}]

dann kann man auch schon typeahead fuer sein input Feld aktivieren ( bei mir mit id #name-search ):

var names = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), queryTokenizer: Bloodhound.tokenizers.whitespace, remote: { url: '/pfad/zu/suche.php?search=%QUERY', wildcard: '%QUERY', }, }); $('#name-search').typeahead( { highlight: true, minLength: 3 }, { source: names, async: true, limit: 10, displayKey: 'name', });

Laut dokumentation wird limit standardmäßig auf 5 gesetzt - das konnte ich nicht bestätigen.

Wenn ich die Zeile: limit: 10 weglasse wird nur ein Ergebniss Angezeigt.

Deshalb habe ich limit auf 10 gesetzt damit mehr als ein Ergebniss angezeigt wird.