Früher oder später trifft jeder auf das Problemchen, dass eine simple Dropdown-Auswahlbox zu umfangreich wird und ganz normale Input-Textfelder doch irgendwie zu wenig sind. Bei mir ist das Problem in der Arbeit aufgekommen: Arbeitet man beispielsweise mit einer Dropdown-Auswahl und Kundendaten, ist das ganze anfangs zwar noch sehr übersichtlich, gehen aber die Kunden mal in die Hunderte, ist das hinsichtlich Optik und Usability keine schöne Sache mehr. Abhilfe schafft dabei jQuery Autocomplete.

jQuery Autocomplete

jQuery Autocomplete ist übrigens ein Teil des jQuery UI Plugins – ein überaus hilfreiches Tool, mit der man jedes Projekt um zahlreiche, coole Look & Feel Features erweitern kann: Dialoge, Buttons, Tabs und eben auch jQuery Autocomplete.

jQuery Autocomplete: So funktionierts!

Wie der Titel meines Blogposts schon andeutet, erhöht jQuery Autocomplete die Intelligenz von einfachen Input-Feldern: Der “standardmäßige” Anwendungsfall – wenn es so einen überhaupt gibt ;) – ist das Erstellen eines Javascript Arrays mit den einzelnen Input-Datensätzen als Inhalt, welches daraufhin einfach über die id des Eingabefeldes initialisiert und als Source an die jQuery Autocomplete Funktion angehängt wird:

Ziemlich easy oder? Aber da geht doch noch viel mehr… ;)

Im nächsten Schritt wäre es natürlich toll, wenn man sofort beim Klick in das Input-Feld die komplette Liste zur Auswahl hat… hört sich gut an? Dann wirds gemacht:

Im Prinzip haben wir nichts anderes gemacht, als der jQuery Autocomplete Funktion bei der Initialisierung die minLength Option auf 0 gesetzt, was nichts anderes bedeutet, als das 0 Zeichen eingegeben werden müssen, um eine Suche zu starten. Weiters verwenden wir die .focus() Funktion, um eben das Event abzufangen, wenn das Inputfeld aktiv geschalten wird – in diesem Fall führen wir einfach durch $('#autocomplete-click').autocomplete("search", ""); eine Suche mit einer leeren Eingabe aus – et voila: Beim Klick in das Feld erscheint sofort eine Dropdown-Auswahl. :D

Aber wir sind noch lange nicht fertig! Immerhin kann es ja vorkommen, dass wir im Dropdown-Menü beispielsweise einen Namen anzeigen wollen, der Value, der schlussendlich aber gesetzt wird etwas anderes sein könnte. Beispielsweise wollen wir einen Kunden-Namen auswählen, brauchen aber die ID des Kunden. jQuery Autocomplete bietet für diesen Fall die tolle Möglichkeit, einfach das Array mit Objekten zu füllen anstatt nur Namen zu verwenden:

Für die Objekte haben wir einfach nur das label und den value gesetzt und das wie im Beispiel davor als source initialisiert. Der Rest bleibt wie gehabt, nur jetzt seht ihr nach der Auswahl den value im Eingabefeld stehen und nicht mehr den Namen.

Damit sind wir aber natürlich noch nicht zufrieden, es sollte doch schon der Name dortstehen, weil es ansonsten ja etwas Kacke aussieht. Dennoch zuvor noch eine kleine andere nützliche Funktion, die die Usability etwas erhöht:

Mit der focus Funktion könnt ihr nämlich eine Funktion definieren, die jedesmal ausgeführt wird, wenn ihr mit der Maus über eine Option in der Dropdown-Auswahl hovert: In unserem Fall setzen wir einfach mittels $(this).val(ui.item.label); den Value des Eingabefeldes auf das Label des selektierten Eintrages – und schon steht im Eingabefeld beim Mouseover jedesmal der Eintrag über dem eure Maus gerade ist.

Gehen wir aber nochmal auf die vorletzte Funktion zurück – wir haben statt nur dem Namen ganze Objekte in das Array gesetzt und dies auf label und value aufgeteilt – uns stehen also die ID und der Name der Einträge innerhalb der jQuery Autocomplete Funktion zur Verfügung. Aber es kann vorkommen, dass er noch weit mehr Optionen braucht, die über label und value hinausgehen – eventuell sogar erst asynchron bei der Auswahl geladen werden müssen? Kein Problem!

Zu all den bisherigen Funktionen fügen wir bei der Initialisierung des jQuery Autocomplete Elements die select Methode hinzu. Ähnlich wie die vorher erwähnte focus Methode, wir eine frei definierbare Funktion ausgeführt, diesmal nicht beim Hovern, sondern wenn ihr ein Element der Liste anklickt. In meinem Beispielcode hol ich mir lediglich die Farbe des gewählten Elementes ($('#color').html(fruitArray[ui.item.value].color);) aus dem ebenfalls zu Beginn gesetzten Objekt-Arrays fruitArray, welches selbstredend beliebige Informationen beinhalten kann.

Aber ihr könnt an dieser Stelle natürlich viel herumexperimentieren und innerhalb der select Methode einen .ajax() Request machen, um beispielsweise ne Datenbank Abfrage zu machen und erweiterte Daten rund um den gewählten Eintrag zu erhalten. Ich hab beispielsweise eine ähnliche Funktionalität verwendet, um beim Auswählen eines Eintrages innerhalb einer Tabelle mehrere Felder mit Inhalten zu befüllen.

Um das ganze in Aktion zu sehen, könnt ihr übrigens meine kleine jQuery Autocomplete Demo-Seite besuchen: jQuery Autocomplete Demo

Ich hoffe, euch hat der Blogeintrag gefallen und auch geholfen! Schreibt mir in den Kommentaren, wenn ihr weitere Anregungen und Ideen habt! :D
In diesem Sinne: Auf intelligentere Input-Felder!