Autocomplete für Drupal mit JQuery

Die Funktion "Autocomplete" kennt jeder. Die gängigen Browser unterstützen diese bereits seit einiger Zeit. Ich möchte nicht mehr darauf verzichten, da es doch die Arbeit erleichtert. Auch in Drupal lässt es sich relative einfach einbinden. Ich zeige hier ganz kurz die wichtigsten Grundlagen auf.

Update 8.8.07: Es gibt eine einfachere und bessere Möglichkeit.

Zuerst müssen die entsprechenden Daten herunter geladen werden.

Daten laden
Damit steht die entsprechende CSS und Javascript Datei zur Verfügung und kann von Drupal verwendet werden.
drupal_add_js('/jquery.autocomplete.js');
drupal_add_css('/css/jquery.autocomplete.css');

Ajax Schnittstelle erstellen
Als nächstes muss eine entsprechende Ajax Schnittstelle im Modul bereitgestellt werden. Dies gschieht im hook hook_menu():

$items[] = array(
     'path'    =>    'autocomplete',
     'callback'    =>    'autocomplete',
     'access'    =>    user_access('access autocomplete'),
     'type'        => MENU_CALLBACK);

Path: Dies ist die Schnittstelle, welche vom Javascript angesprochen werden kann.
Callback: Falls der Pfad "autocomplete" aufgerufen wird, dann wird diese Callback Funktion aufgerufen.
access: Wer hat Zugriff auf diese Funktion (muss dann auch noch im Admin Bereich ein entsprechendes Häckchen gesetzt werden.

Feld festlegen

$("#input_field").autocomplete("autocomplete", {
                delay: 150,
                width: 260,
                maxItemsToShow:10,
                lineSeparator: '%'
            });

Es gibt noch viele andere Parameter, welche gewählt werden können. Dafür am Besten das Readme anschauen. "autcomplete" zeicht auf den Pfad, welcher in hook_menu spezifiziert.
wurde.

Folgende Modifikationen mussten gemacht werden:
jquery.autcomplete.js - Das Skript übergibt einen get Parameter (q). Dies klappt jedoch nicht mit Drupal, da Drupal auch q als Parameter hat. Dies führt zu Problemen. Ich habe daher, um sicher zu sein, all Variablen q in f umbenannt. Wahrscheinlich könnte man auch lediglich die entsprechenden Anpassungen in der Funktion makeUrl auf Zeile 337 machen. Damit es übersichtlicher ist, habe ich die Änderung jedoch konsequent durchgezogen.

Im Weiteren habe ich den lineSeparator geändert. Standardmässig ist '\n' als lineSeparator, doch hat das bei mir irgendwie nicht geklappt.
Das wäre dann auch schon alles.

autocomplete Funktion
Jetzt muss lediglich noch die Autocomplete Funktion auf dem Server gemacht werden. Hier können beliebige Serversachen gemacht werden:

function nickiplorerm_autocomplete(){
 global $user;
 $uid = $user->uid;
 $q = strtolower($_GET["f"]);
 if (!$q || $uid == '') return;
 $sql = "    SELECT DISTINCT receiver_email FROM {nickiplorerm_sent_content}
             WHERE uid = '$uid'
             AND receiver_email like '%$q%'";
 $res = db_query($sql);
 while($row = db_fetch_array($res)){
     print $row['receiver_email'].' % ';
 }
}

mittels $_GET["f"] kann der zu verfollständigende Text eingelesen werden. Am Schluss einfach alles mit print ausgeben und dabei nicht vergessen, den entsprechenden lineSeperator einzugeben. Ist eigentlich ganz simpel.