Auf fast jeder Homepage gibt es ein Suchfeld. Wenn man dort was eingibt ist man sich oft nicht wirklich sicher wie man den gesuchten Begriff schreibt. Google bietet ein Feld an, das während der Eingabe schon anfängt zu suchen und bietet einem Vorschläge.
Hierfür wird Javascript benötigt. Mit Hilfe von Javascript kann mittels AJAX eine PHP – Datei angesprochen werden, die z.B. eine MYSQL – Datenbank anspricht und von dort die Vorschläge holt.

Überwachen des Eingabefeldes

wir wollen Feststellen, ob eine Eingabe gemacht wurde. Sobald das erste Zeichen in dem Eingabefeld ladet soll auch schon nach Vorschlägen gesucht werden. Leider wie so oft muss für den Internet Explorer mal wieder eine gesonderte Version existieren siehe hierzu unter addEvent (fixed im Internet Explorer das Kommando „addEventListener“)

Hier unsere erste Funktion die das Eingabefeld überwacht:

var input_keywords;
function init()
{
	var input_keywords = document.getElementById("keywords");
	addEvent(input_keywords,"keyup",search);
}

über der Funktion wurde noch die Variable input_keywords definiert, sie muss hier global sein, weil sie später noch in mehreren Funktionen verwendet werden soll. Die Funktion init() sollte aufgerufen werden, sobald die Seite fertig geladen ist. Am einfachsten realisiert man das, indem man den HTML-Tag body wie folgt anpasst:

In der zweiten Zeile von der Funktion „init“ wird ein Event-Listener auf das Eingabefeld gesetzt. Dieses hat hier die id „keywords“, es wird beim loslassen einer Taste die Funktion search aufgerufen.

AJAX um die Vorschläge zu erhalten

ich verwende immer folgenden Code um ein AJAX – Object zu erstellen:

function erzXMLHttpRequestObject()
{
	var resObjekt = null;
	try
	{
		resObjekt = new ActiveXObject("Microsoft.XMLHTTP");			//Internet Explorer
	}
	catch(Error)
	{
		try
		{
			resObjekt = new ActiveXObject("MSXML2.XMLHTTP");
		}
		catch(Error)
		{
			try
			{
				resObjekt = new XMLHttpRequest();
			}
			catch(Error)
			{
				alert("Erzeugen eines XMLHttpRequest-Objekts ist fehlgeschlagen. Ajax ist nicht möglich");
			}
		}
	}
	return resObjekt;
}

um jetzt aber AJAX zu verwenden und unsere Vorschläge zu holen, brauchen wir noch folgenden Code:

function search(keywords)
{
        var http = null;
        http = erzXMLHttpRequestObject()
        if (http != null)
        {
           http.open("GET", "/search_while_typing.php?keywords=" + keywords, true);
           http.onreadystatechange = ausgeben;
           http.send(null);
        }
        function ausgeben()
        {
                if (http.readyState == 4)
                {
                        if(http.responseText.length > 0)
                        {
                                document.getElementById("search_result").innerHTML = http.responseText;
                                document.getElementById("search_result").className = "show";
                        }
                        else
                        {
                                document.getElementById("search_result").className = "hide";
                        }
                }
        }
}

wie man sieht sollen die Vorschläge in einem DIV-Container landen, der die id „search-result“ trägt. Die beiden Befehle mit dem className =“hide“|“show“; sprechen zwei CSS Klassen an, die den DIV verstecken oder bei Erfolg zeigen.
Der PHP-Datei werden die Suchbegriffe per URL übergeben. Die Variable trägt den Namen „keywords“

Die PHP Datei

um Vorschläge zu bekommen muss jetzt eine PHP – Datei vorhanden sein (hier: search_while_typing.php) die z.B. eine Verbindung zu einer Datenbank aufbaut und dort die nötigen Suchbegriffe sucht und an unsere Vorschlagsliste zurückgibt.

ganz oben werden mithilfe von „trim“ Leerzeichen und Zeilenumsprünge von dem Suchstring am Anfang und Ende entfernt. Danach werden Sonderzeichen „escaped“ mit Hilfe von Backslashes. Mit dem Befehl „preg_split“ wird der Suchstring an den Leerzeichen aufgespalten und in ein Array gespeichert.
Jetzt muss noch überprüft werden, ob die einzelnen Suchworte länger sind als ein Zeichen. Die Funktion „array_splice“ lässt hier nur eine maximale Anzahl von 4 Suchbegriffen zu. (In diesem Beispiel wird nur das erste Wort behandelt, es lässt sich aber einfach mit „AND“ und „OR“ in der MYSQL – Abfrage auf 4 zu suchende Wörter ‚aufstocken‘.
Nicht vergessen noch eine Datenbankverbindung aufzubauen. Jetzt können mit dem Beispiel- MYSQL-Befehl die Vorschläge gefunden werden. Diese werden dann weiter unten über die „while“-Schleife ausgegeben.

Optimierung und eigene Anpassung – Ideen zur Erweiterung

man könnte die Ausgabe in den Vorschlags-DIV in eine Liste umwandeln, ich hoffe man versteht was ich meine, also <ul> und <li>. Solche Listen lassen sich prima mit CSS formatieren.
Durch diese Liste könnte man zum Beispiel mit den Cursortasten rauf und runter navigieren und so einen bestimmten Vorschlag wählen. (die keycodes sind: UP: 38; DOWN: 40)
Des weiteren könnte man die Vorauswahl mit der Entertaste abschicken und dann an das eigentliche Suchscript der Seite weitergeben (keycode von Enter: 13)

Hier der Javascript-Code zum Abfragen einer Taste:

function check_key(event)
{
	event = event || window.event;
	if(event.keyCode == 38 || event.keyCode == 40 || event.keyCode == 13)
	{
	    ...
	}
}

Denkbar wäre bei „…“ eine Switchabfrage die dann die einzelnen Tasten behandelt.