Autocomplete für Drupal mit JQuery Teil 2

Wie ich im gestrigen Post berichtet habe, lässt sich mit Drupal ziemlich einfach eine autocomplete Funktionalität bauen... es geht sogar noch einfacher. Drupal besitzt von Haus auf bereits die entsprechende Funktionalität. Es muss nur noch folgendes gemacht werden:

Die Schnittstelle im hook_menu festlegen:

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

Wobei mit callback arguments der String vom Autocomplete Feld kommt.

Danach muss die entsprechende callback Funktion definiert werden:

function autocomplete($in){
  ...
  while($row_3 = db_fetch_array($res_3)){
            $matches[$row_3['tag']] = $row_3['tag'];
        }

  print  drupal_to_js($matches);

}

Wobei die ungefähr so aussehen könnte. Mittels drupal_to_js werden die Daten in der richtigen Form zurückgegeben.

Und zu guter Letzt muss nur noch das Formularfeld definiert werden. Dies kann leicht über die Form API gemacht werden:

$form['ngroups_search_tags'] = array(
       '#type' => 'textfield',
       '#title' => t('Tagsuche'),
       '#description' => t("Inhalt deiner Gruppe durchsuchen"),
       '#autocomplete_path' => 'ngroups/ngroups_autocomplete_search_tag',
     
   );

Das wäre es dann auch schon gewesen!

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.

AJAX - In Drupal - Modulentwicklung

AJAX lässt sich ziemlich leicht in Drupal integrieren, hier die wichtigsten Schritte. Zuerst muss der hook_menu implementiert werden:

function modulname_menu(){
 $items[] = array(
 'path' => 'modulname/function_name',
 'callback' => 'function_name',
 'access' => user_access('access module'),
 'type'  => MENU_CALLBACK);
}

Der Pfad (modulname/function_name) lässt sich jetzt bequem als AJAX Request vom Browser (oder natürlich auch als normaler Request) aufrufen. Die Parameter sind ganz normal vorhanden und können mittels $_GET ausgelesen werden.
callback sagt dem Skript welche Funktion aufgerufen werden soll, wenn ein Request an den Pfad (path) gelangt.
Mittels access kann noch spezifiziert werden, wer alles Zugriff hat.

Als zweiter Schritt muss dann lediglich noch der entsprechende Pfad aufgerufen werden. Für AJAX und Drupal empfehle ich die JQuery Bibliothek. JQuery ist bereits standardmässig in Drupal integriert und erlaubt ein sehr einfaches benutzen von AJAX. Zudem erlaubt JQuery ziemlich coole Effekte. Die Funktionalität und Benutzerfreundlichkeit von Webandwendungen nehmen unter der Verwendung von AJAX massiv zu.

Drupal und Thickbox (Lightbox)

Sicher hat jeder schon diese hübschen Fotos gesehen... ein kleines Thumbnail und wenn man drauf klickt, wird der Hintergrund transparent schwarz und das grosse Bild erscheint. Dies in Drupal zu integrieren ist eigentlich ganz einfach.

1. Thickbox modul installieren (Image module und CCK vorher installieren)
2. Einen eigenen Inhaltstypen definieren und dort ein entsprechendes Image Feld machen.
3. Mittels dem Imagecache Modul ein entsprechendes Projekt definieren (in meinem Fall habe ich resize 100x100)
4. Wenn man jetzt auf den kreierten Inhaltstypen geht sieht man folgendes:
5. Ich habe bei mir Label auf Hidden. Der Teaser verweist auf das mittels imagecache erstellt Bild. Für Full dann einfach auf Thickbox verweisen und schon ist es gschafft.
6. Wie es dann aussieht: www.schaerwebdesign.ch

Falls noch nicht klar ist, dann bitte einfach im Kommentar posten und ich werde versuchen, die Fragen zu beantworten.