Suchergebnisse direkt anzeigen

In einem kleinen Verwaltungsprogramm werden dutzende Einzeltitel erfasst. Bei der Ausgabe steht man vor der Qual der Wahl: Soll man die Einträge auf einzelne Seiten gruppieren oder als Index anzeigen? Warum nicht einfach mal über ein Suchfeld: Während der Eingabe wird live das Suchergebnis dargestellt und kann so schnell immer besser verfeinert werden.

Beispiel: So soll der Filter aussehen.
Beispiel: So soll der Filter aussehen.

Nach Einbindung einer aktuellen jquery-Version wird im HTML-Code das Formular mit dem Suchfeld eingefügt sowie ein div-Element für das anzuzeigende Ergebnis:

<form action="<?php echo $_SERVER['PHP_SELF']; ?>">
<fieldset>
     <label for="filter">Filtern nach: </label>
     <input type="text" name="search" id="search" />
     <div>Um alle Mitarbeiter anzuzeigen, geben Sie das Zeichen * ein.</div>
     </fieldset>
</form>
<div id="results"></div>

Außerdem benötigen wir den jQuery-Teil, vorzugsweise am Ende der Seite:

<script type="text/javascript">
$(function() {    
     $('#search').keyup(function() {
          if($(this).val().length > 0) {
               $.get("mysqlabfrage.php", {search: $(this).val()}, function(data) {
                    $("#results").html(data);
               });
          }
     });
});
</script>

Bei Eingabe eines Zeichens wird die php-Datei „mysqlabfrage.php“, in der das entsprechende Select-Statement sowie die Ausgabe abgespeichert sind, aufgerufen und das Ergebnis in das DIV mit der ID „results“ zurückgeschrieben.

Die zugehörige php-Abfrage für den Datenbank-Zugriff sieht dabei so ähnlich wie hier aus:

<?php
$dbconnect = mysql_connect("host", "benutzername", "passwort");
mysql_set_charset("utf8");
$query = "use datenbankname";
if ( !mysql_query($query, $dbconnect) )
     die("Die Datenbank existiert nicht."); 
if($_GET['search'] == "*")
    $sql = mysql_query("SELECT * FROM tabelle ORDER BY name ASC;", $dbconnect);
else
    $sql = mysql_query("SELECT * FROM tabelle WHERE name LIKE '%" . $_GET['search'] . "%'
ORDER BY name ASC;", $dbconnect);
while($row = mysql_fetch_object($sql)) {
     echo "<br />".$row->name;
}
?>

Bei der Suche selbst wird unterschieden, ob ein Stern-Symbol eingegeben wurde oder nicht. Falls ja, wird der gesamte Inhalt der Tabelle dargestellt.

Schwerpunkt: , ,

3 Antworten auf “Suchergebnisse direkt anzeigen”

  1. Well I didn’t use the whole thing I am just interested on the sql injcetion part. Good Stuff, I tried it and it works, well it has no errors, but I didn’t attempt to inject, maybe later..saves a lot of time and coffee for me.Thanks

  2. funktioniert nicht.
    die php abfrage gibt nichts an das div zurück.
    Auch dann nicht wenn ich einen Klartext einfuege (echo „Hallo“;)

    1. „Funktioniert nicht“ ist so eine Sache, da ich Deine Rahmenbedingungen nicht kenne. Da der Artikel schon ein paar Tage älter ist, habe ich mal nachgesehen, welche jquery-Version hier eingesetzt wurde. Das sind bei mir die Dateien jquery-1.9.1.js und jquery-ui-1.10.3.js. Spontan würde ich vermuten, dass es damit zusammenhängt.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.