Suchvorschläge mit Ajax anzeigen lassen – Teil I
von Jan Winkler
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:
<html>
<head>
<title>Ajax Suchvorschläge</title>
</head>
<body >
<form name="form1" method="get" action="/suche.php">
<div align="center">
<h1>Suche</h1>
<input style="width:300px;" type="Text" name="q" value=""
size="30">
<input type="Submit" name="s" value="Suchen ...">
</div>
</form>
</body>
</html>… 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:
<? include_once('mysql.php'); header('Content-Type: text/xml'); //sagt dem Browser die Datei ist XML echo '<?xml version="1.0"?> <Querylist>'; //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<mysql_num_rows($res);$i++) { echo '<Item Name="'.mysql_result($res,$i,'strQry').'" Anzahl="'.mysql_result($res,$i,'intCount').'" />'; } echo '</Querylist>'; ?>
Die Ausgabe könnte dann z. B. so aussehen:
<?xml version="1.0"?> <Querylist> <Item Name="Hans Hase" Anzahl="7" /> <Item Name="Hans Wurst" Anzahl="5" /> <Item Name="Hans im Glück" Anzahl="3" /> </Querylist>
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:
<? $rand = rand(0,9999); ?> <form name="form1" method="get" action="/suche.php" onsubmit="this.q.value = this.q<?=$rand?>.value;"> <div align="center"> <h1>Suche</h1> <span style="position:relative;"> <script type="text/javascript" language="JavaScript"> <!-- document.writeln('<input style="width:300px;" type="Text"'+ ' name="q<?=$rand?>" value="" size="30"'+ ' onkeypress="getQuerys(this.value);"'+ ' onblur="hideQuerys();">'); document.writeln('<input type="hidden" name="q" value="">') //--> </script> <noscript> <input style="width:300px;" type="Text" name="q" value="" size="30"> </noscript> <input type="Submit" name="s" value="Suchen ..."><br> <div style="position:absolute; display:none; left:0px; border:1px solid #AFAFAF; background-color:#EFEFEF; width:300px;" id="trefferliste"> </div> </span> </div> </form>
Zu bemerken ist hierbei, dass das neue Feld ausschließlich per JavaScript geschrieben wird, damit User, die JavaScript abgeschaltet haben, weiterhin eine funktionstüchtige Suche vorfinden. Darüber hinaus wurden bereits mit onkeypress und onblur zwei Ereignisse eingefügt, derer wir uns im zweiten Teil dieses Tutorials annehmen werden.
Dieser Text ist dem Buch “JavaScript und Ajax” entnommen, das im Franzis-Verlag erschienen ist. Das Buch ist hier direkt bestellbar.
Artikel bewerten
(No Ratings Yet)
Loading ...
LIKE “‘.$_GET['q'].’%”
Einen Parameter ungeprüft in die Query? Da gibts eine nette SQL injection und ein Hacker wird sich bald mehr anzeigen lassen anstatt nur Suchvorschläge!