Antwort an „Nico R.“ verfassen

SELF-Forum

click-Event auf datalist

Nico R.

problematische Seite

Hallo Robert,

Mir scheint, dass du datalist mit select verwechselst:

  • datalist erweitert ein input mit Eingabevorschlägen.
  • select bietet eine feste Auswahl an Eingabemöglichkeiten an.

In ein um eine datalist erweitertes input können Nutzer also weiterhin beliebige Daten eingeben.

Ja, ich weiß. Für meinen Fall scheint mir allerdings vom Handling her ein input mit datalist geeigneter. In einem select wird sofort die komplette Palette an options angezeigt, das wären in meinem Fall einige Tausend.

Viele Nutzer wissen nicht, dass man in einer select-Liste auch tippen kann. Das heißt, die würden vermutlich endlos scrollen, um zum gewünschten Eintrag zu kommen. Die Variante input wirkt da deutlich aufgeräumter und weniger abschreckend. Die Auswahlliste verkleinert sich mit jedem eingegebenen Zeichen oder wird komplett geleert, wenn es keine Übereinstimmung mehr gibt. Das finde ich hervorragend.

Event-Handling in Formularen kann trickreich sein. Wenn du direkt auf Eingaben reagieren möchtest, brauchst du einen Eventhandler für das input-Event.

Auf dem input-Feld liegt wie gesagt ein keyup-Event, das auch auf die datalist reagiert. Nur beim click funktioniert das leider nicht. Viele (nicht geübte) User werden nach dem Tippen, wenn sie ihren gesuchten Eintrag sehen, vermutlich mit der Maus drauflosgehen…

Hier mal nochmal der Quelltext. Der JS-Teil mit keyup funktioniert wie gesagt, der zweite Teil war der Versuch, ein einzelnes option-Element aus der datalist per click zu erreichen, aber das ging ebensowenig wie direkt über datalist oder input.

<!DOCTYPE html>
<html>
<body>
	<h1>Datalist</h1>
	<form>
	  <label for="feld">Browser:</label>
	  <input list="liste" id="feld">
	  <datalist id="liste">
		<option value="Edge (Microsoft)" id="test">
		<option value="Firefox (Mozilla)">
		<option value="Chrome (Google)">
		<option value="Opera (Opera)">
		<option value="Safari (Apple)">
	  </datalist>
	  <input type="submit" id="button" style="display: none;">
	</form>
	
	<script>
		(function () { 
			const feld = document.getElementById("feld");
			const liste = document.getElementById("liste");
			const test = document.getElementById("test");
			const button = document.getElementById("button");

			// selectionchange hat im Edge nicht funktioniert...
			//feld.addEventListener("selectionchange", function(event) {
			
			feld.addEventListener("keyup", function(event) {
				if(feld.value.includes("(") && feld.value.includes(")")) {
					button.removeAttribute("style");
				}
			});	
		
			test.addEventListener("click", function(event) {
				console.log("click");
				if(feld.value.includes("(") && feld.value.includes(")")) {
					button.removeAttribute("style");
				}
			});			
		})();
	</script>	
</body>
</html>

Kleine Anmerkung hierzu: script darf kein Kind von html sein, insbesondere darf es kein Nachfolger des body sein.

Upps. Hab ich korrigiert.

Schöne Grüße Nico

freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar

Ihre Identität in einem Cookie zu speichern erlaubt es Ihnen, Ihre Beiträge zu editieren. Außerdem müssen Sie dann bei neuen Beiträgen nicht mehr die Felder Name, E-Mail und Homepage ausfüllen.

abbrechen