nicht angemeldet
dynamische auswahlliste
1211chef
dynamische auswahlliste
1211chef
Auge
OrlokhaII @all, ich brauche eine dynamische auswahlliste, die je nach eingabe optionen zur auswahl bereitstellt. was ist da die einfachste und beste lösung?
ich lese mit ajax eine selektierte werteliste aus postleitzahlen ins formular ein, (im moment testweise noch über ein textfeld) und gebe bei onKeyUp die liste über javascript zum testen aus. das nur als info wo ich stehe.
der beutzer soll also jetzt eine postleitzahl eingeben und je nachdem wie oft die plz in der datenbank vorkommt erhält er schon während er sie eingibt eine dynamische aufgeklappte auswahlliste mit orten die zur postleitzahl passen. mit select und options kann man das nicht realisieren, ausser mit einem externen textfeld und die lösung schaut schei*e aus.
wie mach ich das also am besten und einfachsten? die gurgel kanns ja auch.
gruss gustl
-
Hallo
haII @all, ich brauche eine dynamische auswahlliste, die je nach eingabe optionen zur auswahl bereitstellt. was ist da die einfachste und beste lösung?
ich lese mit ajax eine selektierte werteliste aus postleitzahlen ins formular ein, (im moment testweise noch über ein textfeld) und gebe bei onKeyUp die liste über javascript zum testen aus. das nur als info wo ich stehe.
Erstelle und befülle mit der Rückgabe deiner Ajax-Funktion eine Datalist. Die Umsetzung in den Browsern ist zwar noch mit einigen Stolperfallen gespickt, aber dies ist das dafür vorgesehene Element. Wenn das wegen der Mängel der Unterstützung nicht geht, könntest du zusätzliche
<option>-Elemente in einem<select>erzeugen. So richtig schick, auch in der Bedienung, ist das aber meist nicht.Tschö, Auge
--
Wir hören immer wieder, dass Regierungscomputer gehackt wurden. Ich denke, man sollte die Sicherheit seiner Daten nicht Regierungen anvertrauen.
Jan Koum, Mitgründer von WhatsApp, im Heise.de-Interview-
Erstelle und befülle mit der Rückgabe deiner Ajax-Funktion eine Datalist.
hi auge, datalist sieht nicht schlecht aus, werd ich gleich mal damit experimentieren.
vielen dank erst mal
gustl
-
hi @auge, onKeyUp funktioniert mit input type=search nicht. was ist das dann für ein event?
<input type=\"search\" list=\"plzdata\" onKeyUp=\"eingabe(this.value)\"> <datalist id=\"plzdata\"> .. options .. </datalist>Gruss Gustl
-
Hallo
hi @auge, onKeyUp funktioniert mit input type=search nicht.
Ich bin kein JavScript-Crack. Ich wüsste allerdings keinen Grund, warum dieser Event nun gerade bei dieser Art von Eingabefeld nicht funktionieren sollte. Das Wiki sagt, dass es überall, außer in
<head>funktioniert.<input type="search" list="plzdata" onKeyUp="eingabe(this.value)"> <datalist id="plzdata"> .. options .. </datalist>Was mir auffällt, ist, dass du die alte Methode, ein Event an ein HTML-Element zu binden, benutzt. Es gibt einen modernen Weg, der mehrere Vorteile hat.
- Der HTMl-Quelltext wird vom Event-Aufruf-Attribut freigehalten.
- Es können für ein Element mehrere Eventlistener registriert werden.
- Eventlistener können be Bedarf auch wieder entfernt werden.
Ich kann dir nicht sagen, ob dieser Umstand mit deinem Problem zu tun hat. Wie gesagt: „kein JavScript-Crack“. Beschäftigen solltest du dich damit allemal.
Tschö, Auge
--
Wir hören immer wieder, dass Regierungscomputer gehackt wurden. Ich denke, man sollte die Sicherheit seiner Daten nicht Regierungen anvertrauen.
Jan Koum, Mitgründer von WhatsApp, im Heise.de-Interview-
Ich bin kein JavScript-Crack. Ich wüsste allerdings keinen Grund, warum dieser Event nun gerade bei dieser Art von Eingabefeld nicht funktionieren sollte.
hab grad gegurgelt, es funzt auch bei anderen nicht.
input type=search wäre das perfekte element, aber ohne keyEvents ist es m.E. ziemlich sinnlos. hab gelesen man müsste sich ein script schreiben mit denen man alle tasten einzeln abfrägt und darauf reagiert. leider bin ich in .js auch nicht grade firm für solche aufgaben.
vielleicht meldet sich jemand der dafür ne lösung weiss bzw. mir kurz unter die arme greift.
dir erst mal danke, augE
gruss gustl
-
Hallo 1211chef,
hab grad gegurgelt, es funzt auch bei anderen nicht.
Natürlich geht das. Minimal-Beispiel:
<!DOCTYPE html> <head> <title>blah</title> <body> <input type="search" id="field"> <script> var el = document.getElementById("field"); el.addEventListener('keyup', function(event) { console.log(event.keyCode); }); </script>Hier wird dir in der JS-Konsole jeder einzelne Buchstabe ausgegeben. Getestet mit Chrome und Firefox. Wenn das bei dir nicht geht, dann machst du etwas anderes falsch.
LG,
CK -
Hallo
Input
type=searchmit Event keyup oder mit Event input, und wie dir Auge ja schon nahegelegt hat, unter Verwendung der MethodeaddEventListener…Gruß,
Orlok
--
„Das Wesentliche einer Kerze ist nicht das Wachs, das seine Spuren hinterlässt, sondern das Licht.“ Antoine de Saint-Exupéry-
Input
type=searchmit [Event keyup]also müsste dieses beispiel hello world ins td schreiben wenn ich was eingebe?
... <script type=\"text/javascript\"> var el = document.getElementById(\"field\"); el.addEventListener('keyup', function(event) { document.getElementById(\"druck\").innerHTML = \"hello world\"; }); </script> ... <input id=\"field\" type=\"search\" name=\"plz\" class=\"SObj\" placeholder=\"PLZ\" maxlength=5 list=\"pdata\"> <datalist id=\"pdata\"> <option value = \"12345\"> <option value = \"54321\"> </datalist> ... <table><tr><td id=\"druck\"> </td></tr></table>Gruss Gustl
-
Input
type=searchmit [Event keyup]soweit ich jetzt rausgefunden habe gibt es bei input type=search nur das event "onInput", dann feuert das element bei onChange, onKeyUp onClick etc. auch in der alten notation ... onInput="eingabe(this.value)">.
gestestet auf chrome und IE11
gruss gustl
-
-
-
-
-