Suggest Suche aus DB

  • Hi Leute,


    Ich bin gerade an einem Projekt (mygiftlove) bei welchem man eine eigene Wunschliste erstellen kann.

    Ich möchte nun, wenn man bei den Input Feldern etwas eingibt direkt die DB abgefragt wird und bei Ähnlichkeiten direkt unterhalb des Input Feldes das Ganze angezeigt wird.

    Danach kann man diese "Vorschläge" auswählen und diese werden direkt ins Input Feld übertragen.

    Ich denke mal mit JS und Ajax sollte dies möglich sein?


    Kann mir da jemand helfen?

    Habe ehrlich gesagt noch gar keinen Plan wie wo was zu machen ist.


    Bin für jede Hilfestellung dankbar. :)


    Danke und Gruss

    hunny design

  • Hey,


    dies kannst du mit PHP, JS und Ajax erstellen.


    Auf das Inputfeld intialisierst du ein keyup Event. Bei jedem keyup wird ein Request über Ajax zur PHP-Datei ausgeführt. In dieser PHP-Datei überprüfst du dann das gesendete Wort und führst eine DB-Abfrage mit Like durch. Dann werden dir alle Beiträge aus der Datenbank als Response wieder an das andere Script gesendet. Diese Response kannst du dann ausgeben z.b. als Link. Und diesem gibst du dann die Value des Suchwortes mit. Nun intialisierst du auf alle Links das click-Event und fragst die Value des gedrückten Links ab und gibst diesen dann im input feld aus.


    Grüße,

    Stef

  • Klingt für mich alles sehr logisch.

    Leider habe ich ehrlich gesagt keine Ahnung wie wo was.

    Kannst du mir echt dabei helfen oder einen Anfangs-Code erstellen/zeigen?

    Wäre dir sehr dankbar.


    Danke und Gruss

    hunny design

  • Hey,


    ich habe jetzt was erstellt. Ich finde nur es komisch, dass die click-events auf den Links nicht funktioniert.

    Die Links sollten doch nach der Ausgabe da sein im DOM?


    form.html:

    form.php:


  • Okey, danke vielmal für dieses Beispiel.

    Ich werde es nun versuchen in mein Projekt einzubinden.

    Werde mich wenn ich es irgendwie geschafft habe wieder melden.

  • Ich habe eben nochmal getestet. Es wird keine Ausgabe im Quelltext angezeigt. Da ist es klar warum die Click-Events nicht funktionieren.


    Wenn ich den CodeTeil, mit dem EventListener Click, in der anonymen Function bei der die Response ausgegebe dann funktioniert es aber es wird in das input Feld undefined hineingeschrieben. Das heißt die Werte sind in der HTML-Datei unbekannt.


    Weiß jemand warum das so ist?

  • Hallo,


    Für jeden KeyUp einen Request durchzuführen halte ich für übertrieben.

    Zunächst empfehle ich, erst nach dem dritten Zeichen aktiv nach möglichen Ergebnissen zu suchen.

    Dann sollte man gleich alle Ergebnisse in eine Liste laden und per JS vorhalten. Damit hat man im Idealfall (!) nur einen Request und erhält deutlich schnellere Ergebnisse über die JS-Suche.


    Stell Dir vor, man gibt ein Wort mit 25 Buchstaben ein, dann hast Du mind. auch 25 HTTP Requests für die Suche.

    Da ein XmlHttpRequest asynchron ist, sind manche davon sogar überflüssig, weil beim Response bereits ein weiterer Buchstabe eingegeben wurde und die per HTTP erhaltene Auswahlliste in der Größe gar nicht mehr benötigt wird.


    Als kleines Beispiel ( schematisch, kein produktiver Code )

  • Hey,


    Arne Drews :


    Okay. Da gebe ich dir recht. Das ist schon übertrieben. Danke für den Hinweis. Wir sind ja hier um zu lernen. :)


    Kannst du mir denn sagen, warum die Links nicht im Quellcode angezeigt werden, bei meiner Lösung?


    Wäre dir sehr dankbar.


    hunny design :


    Wir beide haben dir ja schon einen Leitfaden gegeben. Dann verlangen wir auch, dass du dir die Materie genauer anschaust.


    Schlagwörter sind:

    - EventListener Keyup

    - XMLHttpRequest

    - Mysql Like-Statement

    - Click-Event auf Links intialisieren


    Grüße,

    Stef

  • Wenn ich es richtig verstanden haben sollte das Script von Stef dann so aussehen

    * Link entfernt , weil existiert nicht mehr *

    Warum die Ausgabe mit this.value nicht läuft, das weiß ich gerade auch nicht . Mit query geht es . Aber du du keins benutzt hast wollte ich jetzt auch nicht alles um werfen, weil ich ich denke das du es nicht ohne Grund ohne JQuery gemacht hast .


    Vielleicht hilft es dir ja weiter jetzt

  • Arne Drews : Für mich ist es auch noch interessant. Würde mich freuen.


    basti1012 : Genau das wollte ich erreichen. Super gemacht 👍

    Du benutzt Jquery AJAX?


    Würdest du den Code Posten, bzw mir per PN bitte senden, damit ich es mir mal anschauen kann?


    Es ist relativ egal mit welcher Methode man die Daten aus der Datenbank holt. Bei mir ist das Problem das die Ausgabe (Response von der PHP-Datei) nicht im DOM drin ist. Darum funktioniert ja die Intialsierung des Click Events auf die Links nicht.


    Aber warum das ist, kann ich so nicht sagen.


    Grüße,

    Stef

  • In diesen fall habe ich es noch ohne Jquery gemacht.

    Ich hätte es am Liebsten mit Jquery gemacht ,weil es ja doch einiges an arbeit abnimmt und erleichtert.

    Viel geändert habe ich nicht.

    In diesen fall ist zu 90% bestimmt noch alles von dein Code

  • Hatte mal gerade langeweile und habe es mal mit komplett jquery gemacht.

    Was nach meiner ansicht nach um einiges einfacher ist .

    Aber das muß ja jeder selber wissen.

  • Hi,


    Habs jetzt nicht getestet, aber ich denke Du solltest den responseXML verwenden, wenn Du formatierte Daten erwartest:

    Code
    document.getElementById('ausgabe').innerHTML = this.responseXML;

    Wenn das nicht hilft, kannst Du noch versuchen, den responseType zu setzen:

    Code
     request.responseType = 'document';

    Das muss vor dem send() gesetzt werden.


    EDIT: Ich habe mich auf den Beitrag #4 von Stef bezogen

  • Hey,


    okay. Habe deine Varianten getestet aber bei diesen wird überhaupt nichts mehr ausgegeben.

    Ich habe jetzt den Teil, welcher die Linkvalue erfasst und ausgibt in eine Function getan und rufe diese in der Function welche die Response des PHP-Scriptes ausgibt aus. So wie Basti1012.


    Mit this.value kann mann trotzdem nicht auf die Value des geklickten Links zugreifen. Aus dem Grund habe ich auf this die Funktion getAttribute ausgeführt. Und nun funktioniert alles.


    Dies ist mein Code (Die Abfrage ab wann ein Request gestartet wird habe ich noch nicht hinzugefügt.):


    form.html

    form.php


    Grüße,

    Stef

  • Ah ja, ok. Denn so. :)


    Hab mal ein kleines Beispiel abgelegt, wie ich es umsetzen würde: http://examples.php-rocks.de/basic-suggest/


    Aufbau ist einfach nur ein kleines Input-Element, in dem der Name einer Band eingetragen werden kann.

    Ich lasse den HTTP-Request nur das erste Mal ausführen und baue die Liste dann anhand eines JSON immer wieder neu auf.


    Aus der Suggest-Liste kann per Maus ein Vorschlag ausgewählt werden, der direkt in das Suchfeld übernommen wird.

    Bei Klick auf die Schaltfläche wird dann eine Google-Suche aufgerufen.


    Mehr passiert nicht, ist aber denke ich ein ganz anschauliches Beispiel.

    Der Code ist etwas länger, weil ich etwas mehr berücksichtigt habe, aber ich denke übersichtlich genug.


    JavaScript findet ihr ja über die Developer-Tools eures Browsers, die PHP sieht so aus:

  • Hey,


    das ist auch eine sehr gute Möglichkeit dies umzusetzen. Sogar besser. Denn da werden gleich die gefundenen Einträge im select als option angezeigt.

    Muss man nicht mehr auf einen unnötigen Link klicken.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!