Advitum.de auf Google+

Suchergebnisse schon beim Eintippen mit jQuery

Suchergebnisse schon beim Eintippen mit jQuery
VN:F [1.9.22_1171]
Bewertung: 3.3/5 (16 Stimmen abgegeben)
Von am
Kategorien: jQuery, PHP, Tipps, 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.

Suchergebnisse schon beim Eintippen mit jQuery, 3.3 out of 5 based on 16 ratings

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 '

';
		echo preg_replace('/(' . $_GET['search'] . ')/Usi', '<span class="result">\\1</span>', $row->text);
		echo '

';
	}
?>

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!

Suchergebnisse schon beim Eintippen mit jQuery, 3.3 out of 5 based on 16 ratings

Links zum Thema

Jetzt seid ihr dran!

Teilt eure Meinung mit uns in den Kommentaren, gebt eine Bewertung für diesen Artikel ab und teilt ihn in Social Networks!

Über

Ich bin ein junger Webdesigner und Programmierer aus Siegen und blogge auf Advitum.de über meine Erfahrungen im Web. Meine Themenschwerpunkte liegen im Bereich der Web-Entwicklung mit PHP, JavaScript, HTML und anderen Script-, Programmier- und Markup-Sprachen, der Nutzung von Content Management System wie Typo3, Wordpress etc. und der Effekt-Hascherei mit Photoshop. Seit 2008 blogge ich auf Advitum.de – mal mehr, mal weniger regelmäßig – über alles, was mich so interessiert. Wenn dir mein Blog gefällt, freue ich mich immer sehr über Feedback in Form von Kommentaren und E-Mails.

Kommentare zu diese Artikel

Schreibe jetzt einen Kommentar!

Andreas Müller schrieb am Antworten

Seit zwei Tagen versuche ich als absoluter Javascript Noob in meiner Code Igniter Anwendung eine Google Instant Suche einzubauen. Habs versucht mit diversen prototype und jquery / jquery.autocomplete.js Tutorials, die aber so umfangreich waren, dass ich nur Bahnhof verstanden habe und der Müll nicht lief. Insbesondere mit jquery.autocomplete.js konnte ich den Eingabe-DIV nicht von der Ausgabe trennen.

Mit Deinem sau-einfachen Tutorial hat es jetzt auf Anhieb geklappt, auch wird mir jetzt endlich klar wie einfach man jquery nutzen kann. Tausend Dank und weiter so! 🙂

    Lars Ebert schrieb am Antworten

    Vielen Dank, es freut mich sehr, dass dir mein Artikel so sehr geholfen hat.

John schrieb am Antworten

Erstmal vielen Dank für dieses gut geschriebene und leicht verständliche Tutorial.

Ich bin Anfänger, und hätte noch eine Frage. Ich möchte das die Resultate in eine Auswahlliste gepostet werden, also auch Google-ähnlich.

Soweit ich weis, müsste man dafür in der search.php ansetzen, im „echo“ bereich, und von dort aus die Auswahlliste zu befüllen.

Kannst du mir da vielleicht noch eine Hilfestellung geben, wenn es nicht zuviel verlangt ist.

FG John

    Lars Ebert schrieb am Antworten

    Hallo John,

    du solltest in der Datei search.php dies

    while($row = mysql_fetch_object($result))
    {
    echo ‚<p>‘;
    echo preg_replace(‚/(‚ . $_GET[’search‘] . ‚)/Usi‘, ‚<span class=“result“>\\1</span>‘, $row->text);
    echo ‚</p>‘;
    }

    ersetzen. Dass ist nämlich der Teil, der die Suchergebnisse ausgibt. Es könnte zum Beispiel so aussehen:

    echo ‚<select size=“1″>‘;
    while($row = mysql_fetch_object($result))
    {
    echo ‚<option>‘;
    echo $row->text;
    echo ‚</option>‘;
    }
    echo ‚</select>‘;

    Wichtig ist, dass durch dein PHP-Script eine Dropdown-Liste für HTML entsteht. Die wird dann vom Browser richtig gerendert.

Hans Kaufmann schrieb am Antworten

Hallo Lars

Vielen Dank für die Super Beschreibung.
Leider ist bei mir der Wurm drin, ist dieses Tut irgendwo zum Downloaden?

Danke für deine Hilfe !

    Lars Ebert schrieb am Antworten

    Wo funktioniert es denn nicht? Im Artikel sind die Inhalte der Dateien gegeben, die benötigt werden (index.html, main.js und search.php). Lege die Dateien an und es sollte funktionieren.

    Wenn du noch Probleme oder Fragen hast, schreib noch einen Kommentar oder sende mir eine Mail an info@advitum.de!

Adrian schrieb am Antworten

Naja, sehrunperformant. Wenn (wie in diesem Beispiel) LIKE verwendet wird, und dies sogar beidseitig mittels placeholder (%) geschieht.

Sinnvoller wäre MATCH AGAINST.

Die oben beschriebene Methode ist zwar für kleinere Datenbanken noch akzeptabel, hat man aber größere Datensätze/Seiten, so dauert die Suchanfrage meist sehr lange.

    Lars Ebert schrieb am Antworten

    Ich habe mich hier bewusst für LIKE und gegen MATCH AGAINST entschieden, das hat einen ganz einfachen Grund: Es geht hier hauptsächlich um die JavaScript-Umsetzung, die Suche selbst muss und kann noch optimiert werden. Für meine sehr kleine Zahl an Datensätzen macht MATCH AGAINST noch keinen Sinn. Bei größeren Tabellen würde ich mich aber auch für MATCH AGAINST entscheiden.

    Allen Interessierten empfehle ich die Lektüre folgender Diskussion im SelfHTML-Forum:
    http://forum.de.selfhtml.org/archiv/2002/12/t33219/

Sebastian Veit schrieb am Antworten

Ich glaube ich weiß, wieso Hans Kaufmann ein Problem hatte.
Du hast an der Stelle, wo du die Suchergebnisse per AJAX vom Server lädst $.get(„search.ph“ anstelle von $.get(„search.php“ geschrieben.

Ansonsten sehr hilfreiches kleines How-To, Vielen lieben Dank dafür. 🙂

    Lars Ebert schrieb am Antworten

    Hallo Sebastian, danke für dein Feedback! Ich habe das jetzt sofort verbessert, danke für den Hinweis.

    Es freut mich, dass du das Howto hilfreich findest!

René schrieb am Antworten

Bin durch Zufall hier auf der Seite gelandet und bin von dem Tut begeistert. Diese Suche würde ich gerne in meine Seite einbinden, allerdings arbeite ich mit *.csv Dateien. Wie kann ich die durch die search.php durchsuchen lassen?
Vielen Dank im voraus.

    Lars Ebert schrieb am Antworten

    Hallo René, du musst die Dateien zum Beispiel mit file_get_contents() einlesen und anschließend mit strpos() durchsuchen! Das sollte funktionieren.

      René schrieb am Antworten

      Danke für die schnelle Antwort. Leider fehlt mir das Wissen um es umzusetzen. Wie müsste denn der Code aussehen. Wäre toll wenn Du mir weiterhelfen könntest.

Thomas schrieb am Antworten

Hallo und guten Morgen,

ich nutze Dein Tutorial um bei mir eine Suche zu ermöglichen. Das funktioniert auch sehr gut.
Aber 😉
Ich nutze auf der gesamten Seite folgendes Script um Links per ajax in einem Div zu öffnen.
/* Link öffnen in div */
$(document).ready(function(){
$(„a.nav“).click(function(){
$.ajax({url: $(this).attr(„href“),
success: function(response) {
$(„.wrap“).html(response).fadeIn(500);
}});
return false;
});
});

Dazu gebe ich jedem Link einfach nur noch class=“nav“ mit.
Es funktioniert überall, nur wenn ich die Suchergebnisse damit versehe, wird es total ignoriert.
Kannst Du mir evtl. sagen warum?
Ich habe das Gefühl, dass der Scriptschnipsel überhaupt nicht mitgeladen wird. Ich bin neu in javascript, Jquery und Ajax und komme nicht weiter.
Kannst Du mir da irgendwie weiterhelfen?
Gruß Thomas

    Lars Ebert schrieb am Antworten

    Hallo Thomas, das liegt vermutlich daran, dass die Such-Links ja erst hinzu kommen, nachdem Du den Links schon das Event angebunden hast. Ich würde folgendes machen, damit der Event-Handler auch für »neue« Links funktioniert:

    $(document).ready(function() {
        $('body').on('click', 'a.nav', function() {
            //Hier dann den Ajax-Request etc.
        }
    }
      Thomas schrieb am Antworten

      hmm…
      Hallo Lars,
      Ich habs jetzt so…

      /* Link öffnen in div */
      $(document).ready(function(){
      $(‚body‘).on(‚click‘, ‚a.nav‘, function(){
      $.ajax({url: $(this).attr(„href“),
      success: function(response) {
      $(„.wrap“).html(response).fadeIn(500);
      }});
      return false;
      });
      });

      Aber es wird leider trotzdem nicht in den div geladen.
      Ist da noch etwas falsch?
      Thomas

        Lars Ebert schrieb am Antworten

        Aber der Event-Handler wird jetzt auch bei den neuen Links ausgeführt, oder? Lass dir doch einfach mal in dem Success-Callback mit alert die Variable response ausgeben!

          Thomas schrieb am

          Leider wird nichtmal ein einfaches:

          alert(„Test“);

          ausgeführt.
          Es passiert nichts. Nichtmal eine Fehlermeldung.

          Lars Ebert schrieb am

          Okay, wenn der Success-Callback nicht ausgeführt wird, deutet das auf ein Scheitern des Requests hin. Setz erstmal das Alert direkt vor $.ajax, um zu prüfen, ob der Request wenigstens abgesendet wird. Wenn ja: ergänze noch einen Error-Callback und schau ob da was ankommt. Wenn nicht: Dann stimmt schon davor was nicht.

          Thomas schrieb am

          Hallo Lars,

          ich hatte den Javascript-Code in der suche.php.
          Jetzt hab ich ihn den </div gepackt und es funktioniert.

          Mit Deinem letzten Tipp wusste ich leider nichts anzufangen. Ich bin bei Ajax und Konsorten ein ziemlicher Neuling und verstehe das ganze einfach noch nicht.

          Jetzt bin ich erstmal heilfroh, dass es funktioniert.

          Ein großes Dankeschön für Deine Mithilfe.
          Gruß Thomas

Timo schrieb am Antworten

Hallo, Könntest du mir verraten wofür genau das „/Usi“ in der „search.php“ steht? Mir geht es vor allem um das U und das s. Wofür das i ist, habe ich bereits herausgefunden.
Außerdem wäre es für mich auch noch gut zu erfahren wofür das „\\1“ in ‚\\1‘ benötigt wird, bzw. welchen Zweck die Ansammlung von Zeichen genau hat.
Ach und wo genau wurde jetzt das jquery angewendet? Brauche diese ganzen Hintergrundinfos nämlich für eine Dokumentation :/
Danke schonmal im Vorraus. Wirklich ein super Tutorial!

Björn schrieb am Antworten

Hallo Lars, auch mein Dank wird dir ewig folgen, die Suche läuft bis auf eine Sache einwandfrei! Irgendwie werden über das Js-Applet meine Umlaute gekillt. Nutze ich den Absenden Button des Formulars wird alles korrekt angezeigt, nur die Live-Vorschau erkennt keine Umlaute und gibt diese in den Ergebnissen auch UTF8 Codiert zurück. Hast du eine Idee?

Diese Artikel könnten dir auch gefallen