[JavaScript] Events bei Auswahl von Optionen einer Datalist

Parantatatam

mag Cookies & Kekse
Hallo Tutorianer,

ich suche mir jetzt seit einiger Zeit die Finger wund und habe auch schon versucht Event-Handler an unterschiedliche Elemente zu hängen, damit ich folgendes abfangen kann:
Wenn man mit HTML5 eine Datalist für ein Eingabefeld definiert, dann wird – sofern ein Eintrag gefunden wurde – eine Liste mit möglichen Ergebnissen unter dem Eingabefeld angezeigt. Wenn man dieses Beiträge dann auswählt, so würde ich gerne wissen, dass dies passiert ist. Das ist besonders daher wichtig, da bei einer Auswahl mit der Befehlstaste man diese erneut drücken muss, wenn man somit einen Suchvorgang anstoßen möchte. Jetzt wäre es also schöner, wenn man dies nicht müsste, sondern eine solche Auswahl direkt die Suche anstoßen würde.

Ich habe jetzt versucht alle denkbaren Event-Handler sowohl an das Eingabefeld als auch die Datalist zu hängen – ohne Ergebnis. Auch wundert es mich, dass im Chrome dafür kein Shadow-Root angezeigt wird, wie sonst üblich.

Daher jetzt meine Frage: hat jemand dieses Problem bereits gehabt, konnte es vielleicht sogar lösen, oder könnte sich denken, wie man dieses Problem lösen kann?

Grüße

HTML:
<input type="search" list="results" placeholder="Länder, deren Geheimdienste uns überwachen" />
<datalist id="results">
  <option>Großbritannien</option>
  <option>Kanada</option>
  <option>USA</option>
  <option>Frankreich</option>
  <!-- ... -->
</datalist>
 
Es gibt keine Events die in einer datalist feuern, datalist stellt lediglich Daten zur Verfügung um Vorschläge zu unterbreiten(wie bei von Browsern gespeicherten Formulareingaben).

Was du tun kannst: den oninput-event des <input>'s überwachen und wenn er eintritt, prüfen, ob der value des input's identisch ist mit dem Inhalt einer der datalist-option's
 

Neue Beiträge

Zurück