Immer mehr werden Webapplikationen den großen Brüdern auf dem Desktop zur Konkurrenz. Die gar nicht mehr so neue Technik AJAX bringt Leichtigkeit in die sonst starren Webseiten und ist variabel einsetzbar. Einer der ersten produktiven Anwendungen war „Google Suggest“ – eine Suchmaske, die während des Tippens zeitsparende Tipps gibt. Wir bauen sie nach.
Herkömmliche Suchsysteme sind langsam. Nach dem Eintippen muss entweder ein Button oder eine Taste gedrückt werden, die Webseite lädt neu und erst jetzt werden die Ergebnisse präsentiert. Deutlich einfacher geht`s mit einer Suche, die automatisch unter dem Suchfeld mögliche Suchbegriffe präsentiert. Nach dem Prinzip „Quick & Dirty“ lässt sich solch eine Suche in weniger als 15 Minuten umsetzen. Garantiert.
Formular bauen
Aller Anfang bildet ein herkömmliches HTML-Formular, das auch bei einer normalen Suchfunktion eingesetzt wird. Jedoch soll nach jedem Tastendruck eine Suche ausgelöst werden. Dies wird durch den Einbau der Javascript-Funktion suggest erreicht, die nach Tastendruck onkeyup den aktuellen Textinhalt this.value verarbeitet.
<input type="text" id="eingabe" name="q" onkeyup="suggest(this.value)" />
AJAX-Funktionen erstellen
Fast alle Browser haben keine Probleme mit AJAX und der verknüpften Verarbeitung von XML-Objekten. Leider gibt es immer Exoten, die AJAX höchstens als Fußballverein oder Putzmittel kennen. Mittels Überprüfung, ob ein AJAX-Objekt erzeugt werden kann, bekommt jeder Exot eine Fehlermeldung.
xmlHttp=httpXMLobjects(); if (xmlHttp==null) { alert ("Programm kann nicht laden. Kein AJAX verfügbar."); return; }
Ist AJAX verfügbar, wird nach jedem Tastendruck der Inhalt des Textfelds an die Funktion suggest weitergegeben. Dabei gibt es viele Möglichkeiten, welcher Inhalt im Textfeld stecken kann. Ist das Textfeld ganz leer, sollen natürlich auch keine Suchhilfen angezeigt werden. Dafür wird die Länge des übergebenen Strings suchbegriff überprüft. Ist der String leer, wird das Ausgabefeld ausgabe geleert.
if (suchbegriff.length==0) { document.getElementById("ausgabe").innerHTML=""; return; }
In den meisten Fällen ist jedoch ein Suchbegriff übergeben und dieser muss an den Server zur Suche geschickt werden. In diesem speziellen Fall habe ich PHP als geeignetes Backend gewählt. Für den „Versand“ des Suchbegriffs wird eine URL gebastelt, die an die Suchdatei processor.php den String suchbegriff und eine Zufallszahl Math.random() hängt. Die Zufallszahl unterbindet das Cachen der meisten Browser und sorgt somit für stets aktuelle Suchergebnisse. In den folgenden drei xmlHttp-Funktionen wird die oben definierte URL aufgerufen und auf Antwort des Servers gewartet.
var aufruf="processor.php"+"?q="+suchbegriff+"&random="+Math.random(); xmlHttp.onreadystatechange=stateChanged; xmlHttp.open("GET",aufruf,true); xmlHttp.send(null);
Suche in PHP
Ist der Suchbegriff erst einmal im PHP-Skript angekommen, ist die weitere Verarbeitung einfach. In diesem Fall wird ein Array durchsucht, kompliziertere Suchsysteme können jedoch ohne Probleme angeschlossenen werden – nur die Ausgabe muss wieder stimmen. Zuerst wird jeder Suchbegriff mit in einer Schleife mit den gegebenen Begriffen verglichen. Die Funktion strtolower glättet zunächst Suchbegriff und gegebene Terme auf Kleinschrift, um immer gleiche Ausgangssituationen zu erreichen.
Anschließend wird überprüft, ob der Suchbegriff $q mit der gleichen Anzahl Zeichen des gegebenen Begriffs übereinstimmt. Hierzu wird die Funktion substr() genutzt, die ausgehend von der Länge des Suchbegriffs strlen($q) Zeichen ausgibt. Beispiel: Der Suchbegriff „ma“ wird eingegeben. Mittels strlen wird eine Länge des String von 2 Zeichen ermittelt. Der aktuell zu überprüfende Begriff ist „Manuel“. Die Funktion substr liefert mit diesem Begriff und der Länge des Suchbegriffs von 2 Zeichen die Ausgabe „ma“. Dies stimmt also mit dem Suchbegriff überein und kann den Suchtipps eingefügt werden.
if (strtolower($q)==strtolower(substr($keywords[$i],0,strlen($q)))) { $hint= $hint.‘ - ‘.$keywords[$i]; }
Suchtipps anzeigen
Mit der Suchantwort aus PHP in den Händen ist das Kunstwerk der Suggest-Suche fast schon geschafft. Die Ausgabe des PHP-Skripts muss nur noch unter dem Suchfeld platziert werden. Hierzu wird ein Platzhalter unter dem Input-Feld angebracht, in den gleich die Suchtipps kommen.
<div id="ausgabe"></div>
Zum Einfügen der Suchtipps wartet AJAX auf den fertigen Aufruf. Je nach Engine wird der komplettierte Aufruf von der Funktion xmlHttp.readyState als „4“ oder „complete“ übergeben. War somit alles erfolgreich, kann die PHP-Antwort als xmlHttp.responseText in das HTML-Element ausgabe eingefügt werden.
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { document.getElementById("ausgabe").innerHTML=xmlHttp.responseText; }
Fertig! Eine einfache Suche mit automatischen Suchtipps funktioniert. Im angehängten Skript wurde ein einfaches Adressbuch realisiert, das alle möglichen Suchvarianten präsentiert. Natürlich kann die grundlegende Funktion in fast unendlich viele Prozesse integriert und erweitert werden. Dabei bleibt jedoch das grundsätzliche Prinzip immer gleich. Eingabe, Backend-Aufruf, Antwort, Einfügen. That`s AJAX! ™
Die Dateien des Artikel zum Download (ZIP)
Weitere Beiträge:
- 5 Ideen wie Sie wiederkehrende Arbeitsschritte & Marketingprozesse gewinnbringend im Internet automatisieren! Ein Gastbeitrag von Robert Nabenhauer.
- Wachstum durch Facebook-Gewinnspiele: Wie Sie über Facebook virale Gewinnspiele & eine schnell wachsende Fangemeinde aufbauen
- Wie Sie aufmerksamkeitsstarke Prelaunch-, Launch- und Relaunch-Szenarien aufbauen und dabei Viralität, Spannung & Kaufkraft erzeugen
- Wie Sie waschechte Iphone-Apps mit PhoneGAP entwickeln, um am lukrativen App-Markt mitzumischen
- Wie Sie Ihr Shop-Sortiment so präsentieren, dass der Kunde in Zukunft mehr findet und eher kauft! Ein Gastbeitrag von Nicolas Schmidt-Voigt.
- 11 faszinierende BuddyPress-Plugins, um kostenlos aus WordPress ein soziales Netzwerk zu zaubern
- Die Vorboten einer neuen Internet-Industrie! Ein exklusiver Rückblick & Blick hinter die Kulissen der Clickbank-Exchange 2011 in New York.
Loading ...
Ziemlich kewl das ganze. Webdesignerdepot hat das auch und ich muss mal schauen ob es dazu ein WordPress plugin gibt. Ich denke es macht nicht überall sinn eine Livesearch aber bei MBW würde es vielleicht sinn machen.
Ich schau dann gleich mal
Super Sache!
Vielen Dank, jetzt wäre es noch schön, wenn man mit den Cursortasten die Vorschläge auswählen könnte.
Übrigens, mit dem Attribut autocomplete=”off” kann man die Autovervollständigung abschalten.
Schön minimalistisch, einfach zum weiterausbauen.
Ein online-Demo wär nicht schlecht.
Danke für diesen Artikel. Ich werde so etwas in einem Projekt von mir sehr gut gebrauchen können. Ralph
Na, da werden sich die IE6 User aber freuen, wenn sie bei jedem Tastendruck ein Alertfenster bekommen.
Quick & dirty … ok, aber das hier ist unbrauchbar.
Hi zusammen,
ich finde gut, daß sich hier jemand die Mühe macht, das von den Basics her zu erläutern. In der Praxis ist der Griff zu einem der etablierten JS-Frameworks inkl. Plugins (ich bevorzuge jQuery) wohl in jeder Beziehung die bessere Lösung.
Grüße
Stefan
Kurz, schnell und gut. Einfach Super!
Interessant, aber noch besser wäre es mit einer Demo!
Wäre es nicht besser, bei den Exoten einfach gar nichts zu machen, als eine den Besucher u.U. verwirrende Meldung auszugeben? Ansonsten gut, Danke!
Wer was besseres sucht, was nicht gleich ein fettes JavaScript-Framework einsetzt, wird hier fündig.
http://www.webreference.com/programming/javascript/ncz/column2/
meine version mit mySQL intigration:
meine online-demo:
Ich würde das Ding schon gern mal ausprobieren, aber es funktioniert bei mir nicht.
Bei mir werden keine Namen eingeblendet, sondern ein Teil des PHP-Scriptes, ab dem Wort “weiter” aus der Kommentar-Zeile hinter dem $_GET.
Woran kann das liegen?
Hat jemand einen Tip?
(Windows = XP / Browser = FF 3.5.8)
Finden diesen Artikel zu PHP sowie zum AJAX sehr interessant beschrieben. Aber eine kleine Demo sollte hierzu veröfftlicht werden.
SUPEReinfach!
SUPERschnell!
SUPERgenial!
Ich hätte nie gedacht, dass man das so “einfach” realisieren kann.
Das i-Tüpfelchen wäre jetzt noch, wenn man die Ergebnisliste auch mit der Tastatur (Pfeiltasten) erreichen könnte und nicht nur mit der Maus.