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.

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.