Einfache Suggest-Funktion mit AJAX und PHP

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.

Screenshot

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)

arbeitet als Kommunikationsberater für IT-Unternehmen und bloggt gerne über Webtechnologien.

Sortiert nach:   neueste | älteste | beste Bewertung
David Hellmann
Gast
7 Jahre 4 Monate her

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!

Gröner
Gast
Gröner
7 Jahre 4 Monate her

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.

hamlet
Gast
hamlet
7 Jahre 4 Monate her

Schön minimalistisch, einfach zum weiterausbauen.

Ein online-Demo wär nicht schlecht.

Ralph
Gast
7 Jahre 4 Monate her

Danke für diesen Artikel. Ich werde so etwas in einem Projekt von mir sehr gut gebrauchen können. Ralph

Oliver
Gast
7 Jahre 4 Monate her

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.

trackback

[…] Einfache Suggest-Funktion mit AJAX und PHP […]

Stefan
Gast
Stefan
7 Jahre 4 Monate her

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

yvesmatthess
Gast
7 Jahre 4 Monate her

Kurz, schnell und gut. Einfach Super!

Willi
Gast
Willi
7 Jahre 4 Monate her

Interessant, aber noch besser wäre es mit einer Demo!

elsch
Gast
7 Jahre 4 Monate her

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!

Jochen
Gast
Jochen
1 Jahr 7 Monate her

Den „Exoten“ kann man ein modifiziertes Formular generieren, das einen traditionellen Suchbutton hat und dann eben auch auf die alte Art funktioniert.

Wolfgang
Gast
7 Jahre 4 Monate her

Wer was besseres sucht, was nicht gleich ein fettes JavaScript-Framework einsetzt, wird hier fündig.

http://www.webreference.com/programming/javascript/ncz/column2/

trackback

[…] Einfache Suggest-Funktion mit AJAX und PHP (tags: php tutorial ajax such auto suggest funktion) […]

trackback

[…] Einfache Suggest-Funktion mit AJAX und PHPTuesday, 20. January 2009 […]

me
Gast
me
7 Jahre 24 Tage her

meine version mit mySQL intigration: http://test.sta-sta.de/2/2.zip
meine online-demo: http://test.sta-sta.de/2/form.html

trackback

[…] den Ländernamen automatisch vervollständigt. Seit Google AJAX als technische Grundlage für sein Google Suggest Feature verwendet, hat sich dieses Verfahren zu einer der Standard-Webtechniken entwickelt. Auf […]

Hamburgo
Gast
Hamburgo
6 Jahre 2 Monate her

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)

Bodenbeläge München
Gast
5 Jahre 8 Monate her

Finden diesen Artikel zu PHP sowie zum AJAX sehr interessant beschrieben. Aber eine kleine Demo sollte hierzu veröfftlicht werden.

Daniel
Gast
Daniel
2 Jahre 11 Monate her

Super !!
Schön handliches Script, Top Funktion.

Werde das aufjedenfall in mein Projekt einbauen :))

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen