Suchergebnisse schon beim Eintippen mit jQuery
Kategorien: jQuery, PHP, Tipps and Tutorials
Die Suchergebnisse einer Suche schon beim Eintippen des Suchbegriffes anzeigen? Das kann nur Google? Falsch!
Ich zeige euch heute, wie ihr eine solche Suchvorschau nachbauen könnt. Dazu braucht ihr nur jQuery und ein bisschen PHP. Natürlich wären ein paar Daten, die Durchsucht werden sollten, von Vorteil. Aber auch die sind nicht nötig, ich habe meine auch extra für dieses Tutorial angelegt.
Fange ich einfach mal mit den Daten an. Hier ist meine MySQL-Tabelle mit den Daten, die durchsucht werden sollen:
| id | name |
|---|---|
| 1 | Dies ist ein Artikel. |
| 2 | Auch hier steckt ein Artikel drin! |
| 3 | Und auch dies ist ein Artikel |
| 4 | Artikel Nummer 4 |
| 5 | Hier wieder einer. |
| 6 | Noch einer... |
Als nächstes brauchen wir ein Textfeld, in welches der Suchbegriff eingegeben wird. Dazu legen wir ein HTML-Dokument an und füllen es mit diesem Quelltext:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Suche mit jQuery-Autocomplete</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<link type="text/css" href="css/redmond/jquery-ui-1.8.custom.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<form action="search.php">
<input type="text" id="search" name="search" /> <input type="submit" name="submit" value="Suchen" />
</form>
<div id="results"></div>
</body>
</html>
Damit die Suche auch ohne JavaScript funktioniert, kann der Nutzer das Formular mit dem Submit-Button absenden. In der Datei search.php könnten wir dann eine Suche durchführen. Aber uns interessiert jetzt erstmal nur die JavaScript-Suche.
Im HTML-Dokument haben wir schon eine CSS- und eine JavaScript-Datei eingebunden. Die JavaScript-Datei legen wir nun an.
$(document).ready(function()
{
$('#search').keyup(function()
{
//Das soll ausgeführt werden
});
});
Damit lassen wir jedes mal, wenn der Nutzer etwas in das Suchfeld eingibt, die Funktion ausführen.
Als nächstes müssen wir per AJAX die Suchergebnisse vom Server laden und in das div schreiben. So sieht mein JavaScript aus:
$(document).ready(function()
{
$('#search').keyup(function()
{
if($(this).val().length >= 3)
{
$.get("search.php", {search: $(this).val()}, function(data)
{
$("#results").html(data);
});
}
});
});
Mit $(this).val().length überprüfen wir, ob im Suchfeld mehr als drei Zeichen stehen. Meiner Meinung nach mach die Suche nach nur ein oder zwei Buchstaben keinen Sinn. Nach der Überprüfung wird per AJAX der Datei search.php der Suchbegriff übergeben und die Ausgabe in das DIV geschrieben.
In der Datei search.php steht bei mir folgender Code:
<?php
mysql_connect("localhost","root","PASSWORT") or die ("Keine Verbindung moeglich");
mysql_select_db("DATENBANK") or die ("Die Datenbank existiert nicht");
mysql_query("SET NAMES 'utf8'");
$result = mysql_query("SELECT * FROM articles WHERE text LIKE '%" . $_GET['search'] . "%' LIMIT 5");
while($row = mysql_fetch_object($result))
{
echo '<p>';
echo preg_replace('/(' . $_GET['search'] . ')/Usi', '<span class="result">\\1</span>', $row->text);
echo '</p>';
}
?>
Als erstes wird der Suchbegriff in der Datenbank gesucht. Dann werden alle Artikel ausgegeben, die den Suchbegriff enthalten. Als kleines Extra werden alle Vorkommen des Suchbegriffes außerdem von einem SPAN mit der Klasse "result" umschlossen. Diesem weisen wir in der CSS-Datei noch schnell eine Hintergrundfarbe zu:
.result
{
background-color: #00ffff;
}
Fertig ist eine Suche, die schon bei der Eingabe Suchergebnisse liefert. Natürlich könnt und sollt ihr noch einiges an der Suche an eure Bedürfnisse anpassen. Dieses Tutorial soll nur das Grundprinzip der Technik erläutern.
Habt ihr schon Erfahrungen mit dieser oder ähnlichen Techniken? Benutzt die Kommentarfunktion, um sie mit mir zu teilen!