Suggest
Ajax macht Vorschläge beim Tippen
Das Paradebeispiel für Ajax: Die Eingabe eines Namens im Suchfeld wird wärend dem Schreiben mit den Einträgen in einer Datei verglichen. Bei Übereinstimmungen werden die Fundstellen in einem Menü präsentiert. Bei jedem weiteren Key-Up erfolgt ein erneuter Vergleich und die Auswahl an Funden verringert sich. Bei der Auswahl einer Menüzeile wird ein dazugehöriger Eintrag aus der Datei abgerufen.
- Gross-Kleinschreibung wird beim Vergleich missachtet, so dass die Nadel einfach eingetippt werden kann.
- Der Heuhaufen könnte statt der verwendeten Datei auch eine Datenbank sein.
- Anstelle des Alerts kann auch eine beliebige andere Reaktion / Ausgabe erfolgen; z.B. eine entsprechende Seite öffnen.
- Das Verdrängen des folgenden Seiteninhalts durch das Dropdown-Menü könnte verhindert werden mit css visibility:visible statt display:inline.
- Das Dropdown-Menü sollte nach erfolgter Auswahl automatisch verschwinden. Im Beispiel verschwindet es, wenn das Eingabefeld leer ist.
Der Code
HTML - das Formular
accept-charset="ISO-8859-1"
Von Interesse im HTML Formular sind das Inputfeld mit dem Eventhandler onkeyup="sndReq(), und noch das span Element, in welches per Ajax das Dropdownmenü (select mit option Feldern) geschrieben wird.
<form id="form_suche" name="form_suche" class="suche" lang="de" action="#" accept-charset="ISO-8859-1">
<label for="such_feld" class="">Suche nach Namen die mit Ma beginnen:</label>
<p><input id="such_feld" type="text" class="feld_suche" value=""
tabindex="1" onfocus="this.select()" onkeyup="sndReq()" />
<br /><span id="such_antwort"></span>
</p>
</form>
Javascript - die Funktionen im Browser
XMLHttpRequestObject
function createXMLHttpRequestObject() {
var resObjekt;
var Client = navigator.appName;
if(Client == "Microsoft Internet Explorer"){
resObjekt = new ActiveXObject("Microsoft.XMLHTTP");
// alert ("IE");
}else{
resObjekt = new XMLHttpRequest();
// alert ("not IE");
}
return resObjekt;
}
sndReq()
function sndReq(){
if(document.getElementById("such_feld").value !=""){
resObjekt.open('GET', 'ajax_suggest.php?
such_feld='+ escape(document.getElementById("such_feld").value.toLowerCase()) ,true);
resObjekt.onreadystatechange = handleResponse;
resObjekt.send(null);
} else {
document.getElementById("such_antwort").style.display = "none";
}
}
handleResponse()
function handleResponse(){
document.getElementById("such_antwort").style.display = "inline";
if (resObjekt.readyState == 4){
// fügt Response in span ein
document.getElementById("such_antwort").innerHTML = resObjekt.responseText;
}
}
uebernehme()
// wird onclick im Dropdownmenü ausgelöst
// in ajax_sugest.php werden das select-element und die entsprechenden optionen geschrieben
// und als responseText hierher übermittelt
function uebernehme(){
// Ausgabe:
alert (document.getElementById("vorschlag").value);
}
Starte Ajax
resObjekt=createXMLHttpRequestObject();
PHP - die Suche auf dem Server
Response Text
<? php
//------------------------------------------------------------------------------
// Variable holen
//------------------------------------------------------------------------------
// beachte htmlentities
$nadel=htmlentities($_GET['such_feld']); // Suchstring (Eingabe in Suchfeld)
$dateiarray = file("ajax_suggest_data.txt");
//------------------------------------------------------------------------------
// Optionen schreiben
//------------------------------------------------------------------------------
foreach ($dateiarray as $Zeile) {
// beachte htmlentities hier auch
$zeilensplitter=explode("|",htmlentities($Zeile));
if (stristr(trim($zeilensplitter[0]),$nadel)) {
$optionen .= "";
}
}
//------------------------------------------------------------------------------
// Resultat zurücksenden an ajax_suggest.js
//------------------------------------------------------------------------------
$text = '<select name="vorschlag" id="vorschlag" size="5" onclick="uebernehme()">';
$text .= $optionen;
$text .= '</select>';
// Dies ist der responseText:
echo $text;
?>
Der Heuhaufen
ma...
Maria Magdalena | Wäscht gerne Füsse bärtiger Männer Einträge zeilenweise ...
Check den Code.