HTML / CSS, JavaScript / DHTML, WordPress

AJAX Suche für WordPress – nach dem Vorbild von Google Instant Search – Tutorial

Webdesign Podcast AJAX Suche

Vielleicht hat der eine oder andere von euch schon mal die Suche hier auf Webdesign-Podcast.de ausprobiert. Dabei dürfte euch aufgefallen sein, dass es sich nicht um die Standard Suche von WordPress handelt, sondern um eine AJAX Suche die auf einem ähnlichen Prinzip wie Google Instant Search basiert.

Die Suche basiert eigentlich auf einer ganz simplen Technik: Sobald man mehr als drei Zeichen in das Suchfeld eingetippt hat oder den Suchen-Button betätigt, fängt die Suche automatisch an zu Suchen. Über AJAX wird ein HTTP-Request zur eigentlichen WordPress Suche aufgebaut und das Suchwort übergeben. Die Ergebnisse dieser Suche werden dann an das AJAX Such-Script übergeben, dieses blendet daraufhin die aktuellen Inhalte aus und zeigt die Ergebnisse der Suche an.

Sollte der Besucher mit den Suchergebnissen nicht zufrieden sein bzw. wieder zum vorherigen Inhalt zurück wollen, so bedarf dies nur einem Klick auf den Link „klicke hier um die Suche abzubrechen und den vorherigen Inhalt wieder anzuzeigen.“ unter dem Suchfeld.

Anzeige:



Es ist nicht nötig WordPress großartig anzupassen um diese AJAX Suche zu verwenden, wenn ihr euren Besuchern auch die Möglichkeit geben wollt nach der Suche zum aktuellen Artikel zurück zukehren, dann muss es im Content lediglich zwei div Container geben einen für den aktuellen statischen Inhalt und einen zweiten für die AJAx Rückgabe.

Bei mir sind es also einmal #staticContent mit dem aktuellen Content und darunter ein leerer Div #ajaxContent.

Der Rest funktioniert fast komplett über JavaScript, ihr braucht natürlich noch das Suchfeld selbst, ohne geht es schließlich nicht. Mein Such Template hier auf Webdesign-Podcast.de sieht wie folgt aus:

searchform.php

<form action="/" method="get" id="searchform" autocomplete="off">
	<fieldset>
       		<input type="text" class="searchtext" name="s" />
        	<input type="submit" class="searchsubmit" name="searchsubmit" value="Suche" /><br class="clear" />
    </fieldset>
</form>

Du möchtest noch mehr über WordPress erfahren und lernen? Dann schau dir doch einmal mein achtstündiges WordPress-Video-Training an. Es behandelt die verschiedensten Themen rund um WordPress praxisnah und gut verständlich, wie z.B. Theme-Erstellung, MultiSite / Blognetzwerk, eigene Plugins, Custom-Post-Types, Suchmaschinenoptimierung und vieles mehr: WordPress-Video-Training von Pascal Bajorat

Wie ihr seht, handelt es sich dabei um ein ganz normales Suchfeld ohne irgendwelchen Abweichungen von der Norm.

Die Besonderheit dieser Suche liegt wie bereits erwähnt in den JavaScripten, dieses Script werde ich euch hier auflisten und erklären. Da die Suche auf jQuery basiert, achtet entsprechend darauf, dass die jQuery auch eingebunden ist.

Das Such-Script muss innerhalb von jQuery(document).ready(); ausgeführt werden:

function instantSearch(){
	// auslesen des eigegebenen Keywords / Suchwort
	keyword = jQuery('#searchform .searchtext').val();
 
	// Wenn mindestens 3 Zeichen im Suchfeld stehen,
	// wird dieser Bereich gestartet
	if(keyword.length >= 3){
 
		// Wenn noch keine Suche läuft wird dem Benutzer die entsprechende
		if( jQuery('#searchResult').css('display') != 'block' ){
			// Suche läuft... - Meldung angezeigt
			jQuery('#searchform').append('<div id="searchResult" class="loading">Bitte warten, Suche läuft...<\/div>');
		}else{
		// Falls bereits eine Suche ausgeführt wurde oder noch läuft wird die Anzeige zurück auf
 
			// "Bitte warten, Suche läuft..." gesetzt
			jQuery('#searchResult').html('Bitte warten, Suche läuft...');
			// und die CSS Klasse loading angehängt
			jQuery('#searchResult').addClass('loading');
		}
 
		// In diesem nächsten Schritt erzeugen wir ein jQuery Get Objekt
		// und übermitteln die Such-Keywords an die Suche von Wordpress
 
		// index.php ist dabei die Suche
		// "s" der GET Parameter für das Suchwort
		jQuery.get('/index.php', {s: keyword}, function(data,success) {
			// Wenn der Parameter success auch success zurück gibt
			// wurde die GET Anfrage erfolgreich übertragen und Werte zurück geliefert
			if(success=='success'){
				// Hier wird die Rückgabe der Suche generiert
				// Zum einen die Nachricht mit der die Suche wieder zurückgesetzt wird und dahinter
				// Die Rückgabe des GET Rqquests
				newContent = '<p class="notification">Die hier angezeigten Inhalte stellen die Ergebnisse deines Suchvorgangs dar. Um die ursprünglichen Inhalte wiederherzustellen, <a href="#" class="resetsearch">klicke hier<\/a><\/p>'+jQuery('#contentMain #staticContent', data).html();
				// Die neuen Daten werden in den AJAX Container geladen
				jQuery('#contentMain #ajaxContent').html(newContent);
 
				// Die Anzeige in der kleinen Ladebox wird geändert:
				jQuery('#searchResult').removeClass('loading');
				jQuery('#searchResult').html('Die Suchergebnisse werden dir direkt im Ihaltsbereich angezeigt, <a href="#" class="resetsearch">klicke hier um die Suche abzubrechen und den vorherigen Inhalt wieder anzuzeigen.<\/a>');
 
				// Der statische Content Container wird eingeklappt...
				jQuery('#staticContent').not(':animated').slideUp('slow', function(){
					// und der Container mit den Suchergebnissen wird wieder eingeblendet
					jQuery('#ajaxContent').not(':animated').slideDown('slow');
				});
 
				// Hier binden wir die Funktion zum zurücksetzen der Suche ein
				jQuery('.resetsearch').bind('click', function(){
					// Das Suchfeld wird zurückgesetzt
					jQuery('#searchform .searchtext').val('');
					// Das Hinweisfeld wird entfernt
					jQuery('#searchResult').remove();
 
					// Laufende Animationen werden angehalten
					jQuery('#staticContent, #ajaxContent').stop();
 
					// Der AJAX Container wird eingeklappt
					jQuery('#ajaxContent').not(':animated').slideUp('slow', function(){
						// und der mit dem statischen Inhalt ausgeklappt
						jQuery('#staticContent').not(':animated').slideDown('slow');
						// zum Schluss noch den AJAX Container leeren
						jQuery('#ajaxContent').html('');
						// dann haben wir wieder die Zustand wie vor der Suche
					});
					// return false; verhindert das auslösen des Link hrefs
					return false;
				});
				// Falls weniger als 3 Zeichen eingegeben werden wird die Suche nicht ausgeführt und die Nachricht angezeigt
			}else{alert('Bitte gib mindestens 3 Zeichen ein um einen Suchlauf zu starten.');}
		});
	}
	// Verhindert das richtige abschicken des Formulars
	return false;
}
 
// Bindet die AJAX Suche für die entsprechenden Elemente ein
jQuery('#searchform .searchtext').bind('change', function(){instantSearch();});
jQuery('#searchform .searchtext').bind('keyup', function(){instantSearch();});
jQuery('#searchform').bind('submit', function(){instantSearch();return false;});

Probiert es doch einfach mal aus, wenn ihr eure Webseite ein bisschen aufwerten wollt hilft so eine Suchfunktion bestimmt weiter.

Viel Spaß beim ausprobieren

Schlagworte zu diesem Artikel: , , , ,

Veröffentlicht von Pascal Bajorat

Pascal Bajorat ist Mediengestalter und arbeitet als Webdesigner / Webentwickler, Autor und Trainer in Berlin. In den vergangenen Jahren hat er sich vor allem auf das CMS WordPress und die Entwicklung von hochwertigen Webseiten und Sonderlösungen spezialisiert. Er hat den Webdesign-Podcast.de 2010 gegründet.

Webseite:

4 Antworten zu “AJAX Suche für WordPress – nach dem Vorbild von Google Instant Search – Tutorial”

  1. bei mir will das nicht so ganz klappen ich hab die suchleiste in die Navigation eingefügt und das Script im Header zwischen eingefügt was mach ich falsch?

  2. Funktioniert wunderbar. Danke für dieses hilfreiche Stück Code. Ich versuch’s jetzt noch etwas umzubauen damit man zum Beispiel zum StaticContent zurückkommt wenn man sein Suchergebnis im Suchfeld löscht.

  3. Hallo Pascal,
    danke für deinen interessanten Artikel. Ich verwende eine WP Multisite Installation und suche eine Suchfunktion welche die Gesamte Installation durchsucht. Ist dein Script eine Erweiterung der WP-Suche oder funktioniert es unabhängig davon? Danke für deine Antwort!

Schreibe einen Kommentar

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

Der Benachrichtigungs-Dienst wird von WordPress.com (Automattic Inc., USA ) bereitgestellt. Mit der Anmeldung akzeptierst du die Datenschutzerklärung. Die Abmeldung / Abo-Verwaltung ist jederzeit über diesen Link möglich.