Hallo Gemeinde,
ich sitze seit Tagen an einem Problem, welches für die Profis unter euch wahrscheinlich kein Problem darstellt. Ich komme aber mittlerweile nicht mehr weiter. Folgende Ausgangslage:
Ich hole meine Daten (matches) per JSON bzw. werden sie als eine JSON-Datei geliefert. Nun habe ich ein Autocomplete-Feld, welches die Daten filtert.
Soweit funktioniert auch alles super und die Ergebnisse werden per HTML in einer <ul><li> - Liste unter dem Autocomplete-Eingabefeld angezeigt.
Nun möchte ich aber, dass etwas passiert, wenn ich dann einen dieser Einträge anklicke. Mein Ansatz:
Jetzt möchte ich aber einen Eventlistener pro angezeigtem Listeneintrag einfügen:
Das Ergebnis: Es gibt zwar eine Reaktion des Browsers, aber nicht die gewünschte. Es wird nicht (wie ich erwartet hatte) im angeklickten Listeneintrag "Angeklickt!" ausgegeben, sondern immer ein oder zwei Zeilen darunter und dann aber gleich 10x oder noch mehr direkt untereinander. In der Konsole kann ich auch sehen, wie vorher eine Menge Datensätze offenbar bei jedem Klick durchlaufen werden (in der JSON Datei sind ca. 800 Datensätze)
Hat jemand vielleicht einen Hinweis, woran es haken könnte?
Vielen Dank für Eure Zeit.
ich sitze seit Tagen an einem Problem, welches für die Profis unter euch wahrscheinlich kein Problem darstellt. Ich komme aber mittlerweile nicht mehr weiter. Folgende Ausgangslage:
Ich hole meine Daten (matches) per JSON bzw. werden sie als eine JSON-Datei geliefert. Nun habe ich ein Autocomplete-Feld, welches die Daten filtert.
Soweit funktioniert auch alles super und die Ergebnisse werden per HTML in einer <ul><li> - Liste unter dem Autocomplete-Eingabefeld angezeigt.
Nun möchte ich aber, dass etwas passiert, wenn ich dann einen dieser Einträge anklicke. Mein Ansatz:
Code:
// Liste erstellen const outputHtml = matches => { var html = ""; for (i = 0; i < matches.length; i++) { html += "<li id='selectSchool"+matches[i].schul_id+"' class='ac_results'>"; html += matches[i].name + ", " + matches[i].strasse + ", " + matches[i].plz + " " + matches[i].ort + " (" + matches[i].schul_id + ")"; html += "</li>"; //nun vergebe ich jedem Listeneintrag eine eigene ID: var x = document.getElementById("selectSchool"+matches[i].schul_id+""); console.log(x); } matchList.innerHTML = html; }; //klappt bis hier wunderbar
Code:
if (matches[i] !==null) {x.addEventListener("click", function(){innerHTML += "Angeklickt!<br>"});}
Hat jemand vielleicht einen Hinweis, woran es haken könnte?
Vielen Dank für Eure Zeit.
Kommentar