Zur Navigation

jQuery - Suchergebnisse beim Eintippen anzeigen

1 leon

Hallo.
Ich habe ein kleines Online-Wörterbuch mit PHP und MySql-Datenbank zusammengebastelt. Es funktioniert perfekt, nur möchte ich es erweitern und ein kleines Extra hinzufügen, und zwar: Die Begriffe sollen schon beim Eintippen eines Suchworts angezeigt werden, wie bei diesem Wörterbuch hier: http://de.thefreedictionary.com/

Ich habe das Internet zwar abgesucht, konnte aber nichts finden, was wirklich funktioniert. Ich kenne mich mit Javascript eigentlich überhaupt nicht aus. Würdet ihr mir bitte etwas weiterhelfen? Zeigt mir bitte nur das Konzept. Ich versuche dann, es an mein Script anzupassen.

Mein PHP-Script sieht so aus:

 <?php  echo '<form action="" method="get" id="search"><input type="text" name="suchbegriff" value="' . $_GET['suchbegriff'] . '" id="suchfeld"><input type="submit" name="submit" value="Suche" id="submit"></form>'$suche = trim($_GET["suchbegriff"]);if ($suche != "") {error_reporting(E_ALL);$db_connect = mysqli_connect("localhost", "XXX", "XXX", "XXX")    OR die("Verbindung kann nicht erfolgen: " . mysqli_error($db_connect));mysqli_set_charset($db_connect,"utf8");
$abfrage = "SELECT * FROM buch where wort LIKE $suche";$ergebnis = mysqli_query($db_connect, $abfrage);            while ($zeile = mysqli_fetch_array ($ergebnis, MYSQLI_ASSOC)){ echo $zeile['wort'];        echo " &nbsp;";        echo $zeile['erklaerung'];}

}?>

Vielen Dank für eure Hilfe.

12.05.2017 09:53

2 Jörg

Im Prinzip funktioniert das so, dass man an das Eingabefeld einen EventListener bindet auf das Ereignis keyup. Jedesmal, wenn eine Taste losgelassen wird, überprüft das Script dann, ob schon mehr als zwei Zeichen in dem Eingabfeld stehen. Falls ja, wird per Ajax eine Abfrage mit den vorhandenen Buchstaben an ein PHP-Scipt auf dem Server gesendet. Dieses fragt die Datenbank ab und schickt eine Wörterliste zurück, die das JavaScript dann anzeigen kann.

Ich würde hier empfehlen, jquery als Framework zu verwenden, damit ist die Umsetzung schon um einiges einfacher

In den groben Grundzügen ist das Verfahren z.B. auf dieser Seite beschrieben:

http://blog.simplease.at/2011/08/ajax-leicht-gemacht/

Mit den Stichworten "jquery Ajax Autovervollständigung" lassen sich sicher noch weitere Beispiele finden.

12.05.2017 11:32 | geändert: 12.05.2017 11:36

3 leon

Danke Jörg.
Ich habe es genauso gemacht, wie unter dem Link beschrieben wird, aber irgendwie funktioniert das bei mir nicht. Statt des Datenbankinhalts wird bei mir beim Eintippen in das Suchfeld entweder die ganze HTML-Seite erneut geladen oder es kommt eine leere Liste (UL) raus.
Ich weiß, ich mache etwas falsch, aber was genau? Ich bin schon am Verzweifeln.

Gibt es vielleicht eine einfachere Methode ohne jQuery?

14.05.2017 17:27

4 Jörg

Kannst du mal den Code der HTML-Seite sowie der PHP-Datei hier posten?

Gibt es vielleicht eine einfachere Methode ohne jQuery?

Man kann dies auch ohne jquery, d.h. mit bloßem JavaScript umsetzen. Das ist dann aber nicht einfacher, sondern im Gegenteil noch aufwendiger.

14.05.2017 18:26

Beitrag schreiben (als Gast)





[BBCode-Hilfe]