Die Suche von WordPress mit jQuery, Ajax und MySQLi in eine Live-Suche verwandeln

In einem privaten Projekt habe ich mich im vergangenen Monat damit beschäftigt, die von WordPress ausgelieferte Suche in eine Live-Suche zu verwandeln. Ich möchte, dass meine Besucher bereits beim Eintippen des Suchbegriffs sehen, ob es relevante Treffer geben wird. Wenn ihr auch eine Live-Suche in euren Blog integrieren wollt, folgt einfach der folgenden Schritt-für-Schritt-Anleitung.

Im ersten Schritt modifizieren wir das Suchfeld von WordPress, dazu habe ich folgenden Code in die searchform.php meines Theme implementiert.

Wie man sieht, ist hier noch nichts Spektakuläres passiert. Ich habe lediglich ein h4-Tag und eine unsortierte Liste angelegt, in der die Ergebnisse der Live-Suche ausgegeben werden sollen. Im nächsten Schritt müssen wir mit jQuery dafür sorgen, dass die Suchanfrage abgegriffen und verarbeitet wird. Dazu habe ich mir einen Unterordner js angelegt, in dem die Datei live-suche.js liegt:

Was passiert hier? jQuery holt sich den Inhalt aus dem Suchfeld und übergibt ihn an die in der Variablen var ajaxurl gespeicherten URL bzw. Datei, um dort den Query für die Datenbank aufzubauen, dafür brauchen wir jetzt die live-search.php.

Die live-suche.php ist das Herzstück des Scriptes, denn hier wird der Suchbegriff an die Datenbank übergeben. Das Script schaut dann nach, ob es Treffer in der Datenbank gibt und liefert diese in der zuvor definierten unsortierten Liste id=“results“ zurück.

Diese Zeilen sorgen dafür, dass der Suchbegriff (im Beispiel „the“) genauso im Highlight erscheint, wie er im Titel gesetzt wurde. Viele andere Scripte zu Live-Suchen vernachlässigen diesen Punkt leider, was dazu führt, dass in den Ergebnissen der Suchbegriff immer so dargestellt wird, wie im Suchfeld eingegeben.

Als letzten Schritt müssen wir noch ein paar CSS-Stile zu unserer style.css hinzufügen, um das ganze Konstrukt in Form zu gießen. Das CSS könnt ihr natürlich jeder Zeit nach eurem Geschmack anpassen.

Ein funktionierendes Beispiel könnt ihr hier sehen.

Das war es auch schon. Wenn ihr alles richtig gemacht habt, sollte die Live-Suche nun funktionieren. Wer nur mit WordPress eigenen Funktionen und Objekten arbeiten möchte, kann den Datenbankzugriff über MySQLi auch durch $wpdb ersetzen.

Hinterlasse einen Kommentar

*

Nächster ArtikelDie Werkzeugleiste im Frontend nur für Administratoren anzeigen