nicht angemeldet
Hallo Robert,
Mir scheint, dass du
datalistmitselectverwechselst:
datalisterweitert eininputmit Eingabevorschlägen.selectbietet eine feste Auswahl an Eingabemöglichkeiten an.In ein um eine
datalisterweitertesinputkö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:
scriptdarf kein Kind vonhtmlsein, insbesondere darf es kein Nachfolger desbodysein.
Upps. Hab ich korrigiert.
Schöne Grüße Nico
Rolf B
Gunnar Bittersmann