Problem
Es gibt zwei HTML-Eingabefeld-Typen, bei denen ein Anwender einen Wert aus einer Liste bestehender Werte auswählen kann: Radio Buttons und Selects. Radio Buttons sind für Listen mit bis zu acht Einträgen sinnvoll, während Selects bis zu 30 oder 150 Einträgen noch gut anwendbar sind – abhängig von der Art der Daten. Wenn der Anwender aber auch einen neuen Wert eintragen kann, helfen sie nicht weiter – meist wird ihnen dann ein Feld »Andere« beigestellt. Wird die Liste richtig groß – 500 oder sogar 500.000 Einträge, dann sind auch sie nicht mehr verwendbar.

Lösung
Das Autocomplete-Widget von jQuery UI kann die verschiedenen Situationen abdecken, in denen ein Select nicht ausreichend ist. Im einfachsten Fall sind die anzuzeigenden Daten in einem JavaScript-Array verfügbar:
Wählen Sie einen Monat aus:

var months = [’Januar’, ’Februar’, ’März’, ’April’, ’Mai’, ’Juni’, ’Juli’,
    ’August’, ’September’, ’Oktober’, ’November’, ’Dezember’];
$("#month").autocomplete({
    source: months
});

Hier wenden wir das Autocomplete-Plugin auf ein Eingabefeld für einen Monat an, wobei die Daten in einem einfachen JavaScript-Array bereitgestellt werden. Sind die Daten noch nicht auf Client-Seite vorhanden, dann kann das Plugin sie vom
Server holen:

$("#month").autocomplete({
    source: "addresses.php"
});

Das Plugin schickt dann eine GET-Anfrage an diese Ressource, wobei der vom Benutzer eingegebene Wert als Parameter q angehängt wird, also zum Beispiel addresses.php?q=ma.
Als Antwort erwartet das Plugin eine Liste mit durch Zeilenumbruch getrennten Werten:

Mainstraße
Marktstraße
Markusstraße

Diskussion
Zuerst muss man sich entscheiden, ob man das Plugin mit lokalen oder mit Remote-Daten nutzen will. Bei lokalen Daten ist die vollständige Liste der Daten schon im Speicher des Browsers vorhanden. Sie kann als Teil der Seite oder über eine eigene Ajax-Anfrage geladen werden. Auf jeden Fall wird sie nur ein Mal geladen. Dieses Modell ist dann sinnvoll nutzbar, wenn
die Daten klein und statisch sind – weniger als 500 Zeilen – und sich beim Auswählen eines Werts nicht ändern. Der große Vorteil dieser Methode ist der, dass die Daten außerordentlich schnell gefunden werden.
Remote-Daten werden vom Server in kleineren Häppchen geladen (bis zu 100 Zeilen sind sinnvoll). Dies funktioniert sowohl mit kleinen Datenmengen als auch mit sehr großen (zum Beispiel mehr als 500.000). Da die Daten vom Server geladen werden, ist der Suchprozess im Vergleich zu lokalen Daten langsamer. Das kann man durch Datenhappen »ausgleichen«, die groß genug sind und die dann im Client ohne weitere Anfragen gefiltert werden können.

Dieses ist eins von vielen hilfreichen Rezepten aus dem jQuery Kochbuch, mit dem Sie praxisbewährte Lösungen von einem Dutzend der führenden Entwickler lernen, die jQuery für wirklich alles einsetzen: von der Integration simpler Komponenten in Webseiten bis hin zur Entwicklung komplexer, hochperformanter User-Schnittstellen.

Und denjenigen, die nur kurz etwas nachschlagen wollen, können wir die kompakte Befehlsreferenz “jQuery – kurz & gut” ans Herz legen. Es vermittelt dem Leser zu Beginn die notwendigen Grundlagen von JavaScript, dem W3C-Dokumentenmodell und die grundlegende Arbeitsweise mit jQuery. Suchen und Ändern stellen die Kernkapitel der Befehlsreferenz dar und beschreiben die Navigation und Manipulation von DOM-Elementen. Wie man Events und Ajax mit jQuery nutzt und welche Werkzeuge bei der Entwicklung besonders hilfreich sind, sind neben der Anleitung, wie man eigene Plugins erstellt, weitere Kapitel, die dem Leser kurz und präzise die Arbeit mit dem JavaScript-Framework nahe bringen.