Autosuggest mit PHP & Vue.js

Mittlerweile ist es Standard: Wenn wir im Browser oder bei einer Suchmaschine beginnen unseren Suchbegriff einzutippen, erhalten wir Vorschläge mit passenden Suchbegriffen.

In diesem Post zeige ich euch, wie sich eine einfache Variante mit Vue.js und PHP umsetzen lässt.

Was ist Vue.JS?

Vue.js ist ein modernes JavaScript-Framework, mit dem sich dynamische Webanwendungen bequem und einfach umsetzen lässt. Ich persönlich nutze Vue.js gerne, da es sich sehr einfach auch in bestehende Web-Anwendung integrieren lässt. So können alte, schwerfällige reine HTML & PHP-Anwendungen Stück für Stück dynamisch gestaltet werden.

Mit Vue.js lassen sich diverse Applikationen einfach und bequem umsetzen: To-Do-Listen, Warenkörbe, Tabellen inklusive Sortierung und Filterung, Foren, Gästebücher und vieles mehr. Ebenfalls lässt sich mit Vue.js bequem diverse Suchfunktionen umsetzen, die z.B. erforderlich sind wenn man eine große Vergleichsseite betreibt wie beispielsweise neuecasinoohnelizenz.com

Als generelle Einführung für Vue.js, kann ich folgenden Guide empfehlen: Vue.js - Get started

 

Datenbank-Struktur

Zuerst brauchen wir eine Liste mit möglichen Suchbegriffen. Diese können wir recht einfach bekommen, indem wir protokollieren, wonach gesucht wird. Dafür erstellen wir eine neue Datenbank-Tabelle:

 

In dieser Tabelle speichern wir den Suchbegriff, die Anzahl der durchgeführten Suchen für diesen Begriff und wann dieser zuletzt gesucht wurde.

Such-Backend

Als nächstes erstellen wir ein Such-Backend (search.php): Ein PHP-Script, dass einen Such-Query entgegen nimmt. Diesen Suchbegriff speichern wir in der zuvor erstellten Tabelle ab:

Da wir in der Tabelle query als unique definiert haben, können wir ON DUPLICATE KEY nutzen um den Zähler für die Anzahl an Suchen um 1 zu erhöhen, wenn erneut danach gesucht wird.

Als Rückgabewert geben wir den Suchbegriff zurück, das aktuelle Datum, und zwei Zufallszahlen für die Gradzahl Heute und morgen. Bei einer realen Anwendung müsste man hier natürlich noch die entsprechende Suche implementieren.

Autosuggest-Backend

Als nächstes erstellen wir das Backend für die Suchvorschläge (suggest.php):

Hier fragen wir alle Datenbank-Einträge ab, die mit der Eingabe starten. Diese werden absteigend nach der Suchhäufigkeit sortiert. Ebenfalls limitieren wir die Anzahl auf 5.

Wenn wir also z.B. suggest.php?query=Wetter B eintippen, werden Suchbegriffe wie Wetter Berlin und Wetter Bochum vorgeschlagen.

Vue.js Frontend

Nun kommen wir zu dem Teil, wo wir Vue.Js nutzen. Hier benötigen wir drei Komponenten:

  • Ein Suchfeld inklusive Button für die Suche
  • Ein Liste mit unseren Suchvorschlägen
  • Ein Feld zur Darstellung der Suchergebnisse

Vollständig sieht der HTML-Code wie folgt aus:

Zuerst die Suchleiste: Hier haben wir das Input-Feld, einen Button der die tatsächliche Suche ausführt und ein Anzeigefeld, für die Suchvorschläge (sofern suggest.php Ergebnisse liefert):

Sofern Ergebnisse von search.php vorliegen, zeigen wir diese in dem folgendem div an:

Nun der eigentlich spannende Teile, der entsprechende Vue.js Code der alles zusammenführt:

Wir definieren zwei Methoden: search wird ausgeführt, wenn wir auf den Such-Button klicken. Hier wird search.php aufgerufen und die Rückgabe wird unter this.search_response gespeichert.

Sobald wir etwas in das Suchfeld eintippen, wird die Methode suggest() aufgerufen: Diese fragt das suggest.php Backend nach passenden Suchbegriffen ab. Diese werden in this.suggest_items abgespeichert.

Autor:
Zurück zur Übersicht aller Beiträge