Ich stand heute vor der Herausforderung eine komfortable Live-Suche zu realisieren. Da ich keine Zeit hatte den Umfang dieser Suche komplett selbst zu entwickeln, habe ich mich mit dem ohnehin im Projekt eingesetzten Javascript Framework Scriptaculous auseinander gesetzt.
Die Umsetzung war erschreckend einfach!
Scriptaculous stellt quasi eine ready-to-use Funktion von Anfang an. Die folgenden Schritte beschreiben, wie man eine einfache Live-Suche mit Scriptaculous erstellen kann.
Hier mal ein kleines Beispiel*:
Das Eingabefeld und der darunter gelegene div Container sind im Grunde genommen alles, was die HTML Struktur aufweisen muss.
new Ajax.Autocompleter("autocomplete", "autocomplete_choices", "/url/on/server", {});
Als Javascript wird nur die Scriptaculous Funktion Autocompleter, welche direkt auf dem Prototype Ajax Objekt aufsetzt mit den entsprechenden Parametern, die sich in der HTML Struktur wiederfinden, aufgerufen und schon steht das Ganze.
Zugegeben ist dieses Beispiel sehr einfach gehalten. Die Autocompleter Funktion erlaubt noch eine Menge mehr. So kann man zum Beispiel weiterführende Javascript Funktionen direkt in der Parameterliste angeben, in denen das Suchergebnis direkt verarbeitet wird.
(*) Alle Codeschnipsel wurden dem Scriptaculous Wiki entnommen.