| Weitere Artikel aus dem Webentwickler Blog |
| Teilen |  |
 |
 |
Um mit einem leichten Beispiel in die Ajax-Praxis einzusteigen, wollen wir uns als erstes mit der Live-Anzeige von Suchvorschlägen beschäftigen. Ziel soll es sein, ein bestehendes Suchformular so zu erweitern, dass während der Eingabe der ersten Buchstaben bereits weitere Vorschläge geladen und angezeigt werden.
Die Basis:
Als Grundlage verwenden wir ein einfaches Suchformular ohne großen Schnickschnack:
Ajax Suchvorschläge
… bisher also nichts Besonderes soweit.
Daten vorbereiten:
Als erstes bereiten wir die Daten vor, um sie dann per Ajax abrufen zu können. Hierzu wird eine Datei ajax_search_query.php erzeugt. Diese liest den übergebenen Parameter aus, verbindet sich mit einer MySQL-Datenbank und fragt diese nach ähnlichen Suchbegriffen ab. Die gefundenen Suchvorschläge werden anschließend verarbeitet und als XML-Daten ausgegeben:
';
//alle Suchbegriffe suchen, die mit der aktuellen Suche beginnen
$res = mysql_query('SELECT strQry, intCount
FROM querycount
WHERE strQry LIKE "'.$_GET['q'].'%"
ORDER BY intCount DESC');
//alle Treffer als XML-Elemente ausgeben
for($i=0;$i ';
?>
Die Ausgabe könnte dann z. B. so aussehen:
Jetzt wird's dynamisch:
Als nächstes müssen wir uns darum kümmern, dass sich die Suchvorschläge überhaupt anzeigen lassen. Hierzu wird einfach ein div in das Formular eingefügt und entsprechend positioniert sowie mit einer ID versehen, damit wir es via DHTML ansprechen können. Darüber hinaus müssen wir uns darum kümmern, dass der Browser nicht seine Suchvorschläge aus vergangenen Suchvorgängen anzeigt (wir müssen also die Auto-Vervollständigung des Browsers austricksen). Da der Browser die Auto-Vervollständigung anhand des Feldnamens speichert, umgehen wir dies einfach, indem wir das Feld jeweils per Zufall mit einem neuen Namen versehen. Um beim Absenden des Formulars aber dennoch den richtigen Parameternamen zu erhalten, wird zusätzlich ein verstecktes Feld mit dem Original-Feldnamen eingesetzt und diesem beim Absenden der passende Wert übergeben. Mit diesen Erweiterungen sieht das Formular dann in etwa so aus:
Ganzen Artikel lesen...
Jan Winkler
Lernen Sie die ganze Vielfalt vom Franzis Buch- und Softwareverlag kennen
