Vorwort

Diese Anleitung wurde für Schulungszwecke erstellt, weshalb einiges nicht als fertiger Code zur Verfügung steht. Es soll keine Copy-Paste-Übung werden 😅

Sollte etwas unverständlich oder inkorrekt sein, bitte ich um Feedback um es beheben zu können. Nobody is perfect.

Live Suche

inc/liveSearch.inc.php

error_reporting(E_ALL); und init_set('display_errors', 1); sollte auf keinen Fall im Live Betrieb gesetzt werden. Es gibt an, welche PHP-Fehlermeldungen gemeldet werden.
https://www.php.net/manual/de/function.error-reporting.php

Der Request aus der Suche wird in die Variable $q gespeichert. Wenn $q vorhanden ist wird ein SQL Statement aufgebaut. Sofern das Ergebnis nicht Null ist, wird eine Linkliste mit den Einträgen erstellt.
Der Link kann als Sprungmarke gesetzt werden zur Card des jeweiligen Eintrages.

Das Suchfeld in der inc/loggedNav.inc.php

Zusätzlich zum Input Feld wird eine noch leere Div-Box erstellt mit der Klasse result. Hier werden dann die Suchergebnisse eingefügt.

Das JS zur Livesuche in js/custom.js

Die Funktion für die Suche wird dann ausgeführt, wenn das Dokument fertig geladen ist. Sobald der User anfängt im Suchfeld zu schreiben, reagiert die Funktion darauf, das Input Feld mit der Klasse .search-box definiert wurde und zum anderen durch .on('keyup input', .....
Der geschriebene Inhalt wird in die Variable inputVal und die leere Div-Box in die Variable resultDropdown gespeichert.
Wenn die Variable inputVal eine Länge besitzt, wird die Datei liveSearch.inc.php aufgerufen und ihr der Inhalt von inputVal in term mitgegeben. Wenn erfolgreich Daten zurück kommen, werden diese in der Div-Box eingefügt.