Ein gute Suchfunktion ist umso wichtiger, je größer der Datenbestand ist. Optimal wäre es, würde der Anwender bereits während Eingabe der Suchparameter über die zu erwartende Anzahl der Treffer informiert. Einen Weg dahin zeigen uns jQuery und PHP.
Hinweis: Dieser Artikel versteht sich als Anregung. Die verwendeten Scripts sind aufgrund mangelnder Absicherung nicht für den Produktiveinsatz gedacht; sie sollen lediglich die Umsetzung aufzeigen.
Damit die Anzahl der Treffer ohne Neuladen der Seite angezeigt werden kann, benutzen wir JavaScript, in diesem Fall das jQuery-Framework, damit wir uns keine Gedanken über die Requests machen müssen. Außerdem wird PHP für die Datenbankabfrage verwendet. Live-Demo im neuen Fenster
Der Beginn
Für die Suche wird in unserem Beispiel ein Formular mit drei Dropdown-Feldern verwendet. Generell ist es natürlich auch möglich, Checkboxen, Radiobuttons oder Textfelder abzufragen. Wir unterstellen ein fiktives Möbelsortiment; der Anwender kann nach der Bezeichnung (zum Beispiel „Wille“), der Art (Stuhl, Liege…) und der Farbe suchen. Die Anzahl der gefundenen Datensätze wird direkt auf dem Suche-Button angezeigt.
Um das jQuery-Framework einzubinden, reicht eine Zeile im <head>-Bereich der Seite:
<script type="text/javascript" src="js/jquery.js"></script>
Wobei der Pfad entsprechend angepasst werden muss.
Die Suche anstoßen
Folgendes kurzes Script reicht, um die Werte aus den Dropdown-Feldern zu holen und an das PHP-Suchscript zu übergeben:
$("select").change(function(){
Bezeichnung=$("#Bezeichnung").val();
Art = $("#Art").val();
Farbe = $("#Farbe").val();
Abfrage = "Bezeichnung=" + Bezeichnung + "&Art=" + Art + "&Farbe=" + Farbe;
$.get("abfrage.php", Abfrage, function(Ergebnis){
$("#Suche").val(Ergebnis + " Treffer anzeigen");
})
})
Durch die Verwendung von $(„select“).change wird die Funktion jedesmal ausgeführt, wenn sich der Inhalt eines Dropdown-Feldes ändert, das heißt die Funktion ist automatisch an alle SELECT-Felder gebunden. Falls dies nicht gewünscht ist, kann für die einzelnen Felder eine Klasse oder ID vergeben werden.
$(„select#Suche“) bezieht sich nur das SELECT-Feld mit der ID „Suche“, $(„select.Suche“) auf alle Felder mit der Klasse „Suche“.
Die Werte der jeweiligen Felder werden dank jQuery ganz einfach über deren Namen ausgelesen; $(„#Bezeichnung“) ist die Kurzform für document.getElementById(„Bezeichnung“).
Abschließend müssen die Werte nur noch an das Suchscript übergeben werden. Dazu werden sie in einen String gepackt, welcher nach dem Muster „Wert=Inhalt“ aufgebaut ist.
Dank des $.get-Befehls brauchen wir uns keine Gedanken über die Requests zu machen; es reicht aus, lediglich den Pfad zum Suchscript sowie die Parameter zu übergeben. Da das Script einen Rückgabe-Wert liefert, wird dieser durch
$("#Suche").val(Ergebnis + " Treffer anzeigen");
direkt auf dem Such-Button angezeigt.
Suchen
if ($query != "") {
$sql = $sql . " WHERE " . $query;
}
Da die Daten durch den $.get-Befehl übergeben wurden, werden sie vom Suchscript so behandelt, als wäre es in der Form „abfrage.php?Bezeichnung=Wert&Art=Wert&Farbe=Wert“ aufgerufen worden.
Wie bereits erwähnt, handelt es sich hier nur um eine Anregung. Die übergebenen Werte dürfen nicht ungeprüft übernommen werden.
Als erstes werden alle übergebenen Parameter und Werte ausgelesen; dies erledigt die kleine Schleife
foreach($_GET as $key => $value) {
$Parameter[$key] = $value;
}
Zwar könnte man bei nur drei Werten diese auch „zu Fuß“ abholen ($Parameter[‚Art‘]=$_GET[‚Art‘]). Allerdings ist man so auch für größere Anfragen gerüstet.
foreach($Parameter as $key => $value) {
if ($value != "") {
if ($query != "") {
$query = $query . " AND ";
}
$query = $query . $key . " = '" . $value . "'";
}
}
Danach werden die Parameter der Reihe nach abgefragt und falls ein Wert übergeben wurde, wird dieser an den späteren Suchstring für die Datenbankabfrage ($query) gehängt. Falls es mehr als einer sein sollte, muss natürlich noch ein „AND“ dazwischen, dafür sorgt die Überprüfung, ob $query leer ist oder nicht.
Zum Schluss wird der endgültige Abfragestring zusammengesetzt; sollte $query leer sein, werden alle Datensätze gelistet. Da es hier ausreicht, wenn wir wissen, wie viele Datensätze gefunden wurden, wird die Anzahl durch einen einfachen echo-Befehl an die Webseite zurückgeschickt. ™
echo mysql_numrows($result);
0 Antworten zu „Suchergebnisse anzeigen ohne Nachladen mit jQuery“
— was ist Deine Meinung?
Hallo!!
Gibt es irgendwo ein Tutorial dazu, oder zumindest Einsicht in die komplette abfrage.php?
Bin für jeden Hinweis dankbar.
Grüße
Eros
Danke für den JS Code. Das nun die Werte nicht gefiltert werden gehört ja auch nicht zu dem Beispiel oder? Wenn ich mir schon meine Erweiterung selber programmiere sollte ich wohl von alleine Wissen das ich auf sicherheit zu achten habe und die Werte dem entsprechend filtern lasse und die Datenbankabfrage sicher gestalte. Ausserdem steht im Titel nun auch nicht wie man Daten aus einer mySQL DB lädt und vorher sowie nachher die Werte prüft und filtert.
Zu dem JS Beispiel nochmals danke.
ich habe mal probiert diese leiste in meine homepage einzubinden, allerdings ist nichts erschienen auser dem code ganz untem im design. muss ich erst den code bearbeiten oder müsste eigentlich gleich etwas in der art zu erkennen sein????
Danke für den TIP.
Ich mach ja eh auch viel mit Typo3.
Aber eher ‚Erweiterungen verwenden’…
Das eID Feature war mir jedenfalls neu, aber kann man sicher mal brauchen 😉
Das mit dem Ersetzen des kompletten HTML in einem DIV-Tag ist realtiv einfach. Dafür gibt es bei jQuery „$.ajax“. Man einstellen welcher Typ von Rückgabecode erwartet wird, zB. HTML, XML, JSON usw.
Ich benutze das mittlerweile sehr erfolgreich in Kombination von Typo3 und dem eID-Feature. Damit hab ich sogar eine Fallback-Variante realisieren können, dh. das Ganze funktioniert auch ohne Javascript aber dann halt ohne AJAX und die netten Effekte.
Danke für die Info bezüglich der Einbindung von JQuery 🙂
Diese $() Ausdrücke warn mir bisher auch eher suspekt.
Das ist mal wirklich ein netter Einstieg.
Bezüglich der Server-Seite muss ich leider Dominic rechtgeben.
Ich finde das auch total unpassend derartig ungesicherten Code zu präsentieren.
Da wäre es schon besser gewesen den Server-Teil im Artikel komplett auszulassen, oder sich halt ein wenig mehr Zeit zu nehmen den auch ‚korrekt‘ zu machen.
Hätte ja wohl auch nur ein paar Zeilen Code mehr erfordert…
So ist der Artikel leider nur ‚eine halbe Sache‘ geworden.
Aber vielleicht kann man ja auch einen 2ten Artikel nachschiessen, mit korrektem Server-Teil 😉
Mich würde z.B. auch das ersetzen kompletter div tag inhalte mit jquery durch html-tags vom server her interessieren…
Der Tipp, den Code hier nicht für den Produktiveinsatz zu nutzen ist zwar nett gemeint, wird aber PHP/MySQL Neulingen wenig helfen.
1.) Die Werte sollten(!) „zu Fuß“ abgeholt werden um sicherzustellen, dass die Feldnamen auch tatsächlich in der Datenbank existieren. Ob das nun so wie in dem Beispiel gemacht wird, oder über einen Array mit den erlaubten Feldnamen, ist ja dabei wurscht.
2.) Die Parameter in der dieser Zeile:
$query = $query . $key . “ = ‚“ . $value . „‚“;
müssen folgendermaßen escaped werden:
$query = $query . $key . “ = ‚“ . mysql_real_escape_string($value) . „‚“;
3.) Die ganze Abfrage an die Datenbank ist ziemlich unglücklich: Wenn es mir nur darum geht die Anzahl der gefundenen Zeilen auszugeben, dann sollte man „COUNT(*)“ zum Zählen verwenden, statt alle Zeilen tatsächlich aus der Datenbank zu holen.