datalist über ID ansprechen (innerHTML)

[1211chef]

haII @all, wieso kann ich datalist nicht über ihre ID ansprechen? die daten werden einwandfrei geliefert und in elemente wie div oder td kann ich sie drucken. nur nicht in die datalist.

meine daten werden erst nach kompletter eingabe der 5-stelligen plz geliefert. unter einer plz sind oftmals mehrere orte mit unterschiedlichen geodaten hinterlegt. die geodaten und ortsnamen lass ich mir noch nicht liefern, muss erst rausfinden wieso ich die options nicht in datalist schreiben kann. in der variable inf stehen also derzeit testweise nur postleitzahlen.

hier mein komplettes testscript.

gruss gustl

<script type="text/javascript">

  function eingabe(plz) { GET_GEO("example.cgi?plz="+plz); }
  
  function GET_GEO(url)
  { 
    AJAX = new XMLHttpRequest();  
    AJAX.open('GET',url,true);
    AJAX.onreadystatechange = function () 
    { 
      if (AJAX.readyState == 4) { zerlege(AJAX.responseText); } 
    } 
    AJAX.send(null);
  }
  
  function zerlege(txt) 
  { 
    var inf = txt.split(":");
	
	var alle = "";
 
    for (b = 0; b <= inf.length; b++) { alle = alle+"<option value="+inf[b]">"+b"</option>"; }
	
	document.getElementById("geoinf").innerHTML = alle;
  }
  
  </script>

  <input type="search" name="plz" class="SObj" placeholder="PLZ" list="geoinf" maxlength=5 onInput="eingabe(this.value);" />
  <datalist id="geoinf">
  <option value="12345">Test A</option>
  <option value="54321">Test B</option>
  </datalist>

[1211chef]

und schon das nächste problem mit input type=search. sobald ich in value zahlen mit buchstaben vermische tauchen sie nicht mehr in der datalist auf. "12345" wird gefunden wenn ich "1" eingebe. "12345;halloA" oder "12345 halloA" taucht in der liste nicht auf, wenn ich "1" eingebe.

schön langsam denke ich dass input type=search ein unbrauchbares element ist.

gruss gustl

[Auge]

Hallo

und schon das nächste problem mit input type=search. sobald ich in value zahlen mit buchstaben vermische tauchen sie nicht mehr in der datalist auf. "12345" wird gefunden wenn ich "1" eingebe. "12345;halloA" oder "12345 halloA" taucht in der liste nicht auf, wenn ich "1" eingebe.

Gibt es denn Einträge in der Datenquelle, die du über deine Ajax-Funktion abfragst, die „12345;halloA“ oder „12345 halloA“ enthalten? Wenn nicht, können diese Eingaben auch nicht gefunden werden.

schön langsam denke ich dass input type=search ein unbrauchbares element ist.

Das ist genauso gut oder wenig brauchbar wie input type=text oder sonstwas.

Tschö, Auge

[1211chef]

Gibt es denn Einträge in der Datenquelle, die du über deine Ajax-Funktion abfragst, die „12345;halloA“ oder „12345 halloA“ enthalten? Wenn nicht, können diese Eingaben auch nicht gefunden werden.

hi auge, die datenlieferung hat nichts damit zu tun.

<option value="12345">Test1</option> wird angezeigt wenn ich "1" eingebe.

<option value="12345 A">Test2</option> wird NICHT angezeigt wenn ich "1" eingebe.

wenns nicht angezeigt wird kann ich es nicht auswählen und auch nicht verarbeiten. der komplette string sieht irgendwann mal aber so aus:

<option value="12345;Hinterdupfing;lon:12.24532laber;lat:42.289345laber">12345 Hinterdupfing</option>

in einer ganz normalen optionlist kann ich values aufbauen wie ich will. mit dem search/datalis-ding geht das nicht weils nicht mehr angezeigt wird.

und wieso kann ich die kiste nicht über die ID ansprechen wie jedes andere element auch, und mit innerHTML was reindrucken ...

gruss gustl

[sm]

<option value="12345">

<option value="12345 A">

Funktioniert!

Suche den Unterschied ;)

[Auge]

Hallo

<option value="12345">Test1</option> wird angezeigt wenn ich "1" eingebe.

<option value="12345 A">Test2</option> wird NICHT angezeigt wenn ich "1" eingebe.

Wenn du es falsch machst, ist es kein Wunder, wenn es nicht will. Ich hatte in deinem anderen Thread, in dem du durchaus hättest bleiben dürfen um alles zum Problem beieinander zu halten, nicht umsonst die Wiki-Seite verlinkt. Die <option>-Felder einer Datalist haben keinen Inhalt. Es gibt hier ausschließlich die Value-Attribute, die als Vorschläge dienen. Schaue dir bitte noch einmal das Beispiel auf der Wiki-Seite an.

in einer ganz normalen optionlist kann ich values aufbauen wie ich will. mit dem search/datalis-ding geht das nicht weils nicht mehr angezeigt wird.

Noch einmal: Das hat nichts mit type="search" zu tun. Ein Input vom Typ „text“ reagiert genau so wie eines vom Typ „search“. Wegen weiterer Fehler im Zweifelsfall auch genauso falsch. ;-)

Von dir, als jemandem, der hier auch schon über 10 Jahre dabei ist, habe ich eigentlich erwartet, einen einfachen Test, wie den Folgenden, durchzuführen. Dann hättest du das auch selbst erkannt. Wenn der Code zudem wie im Beispiel aufgebaut ist (ohne Inhalt), funktioniert er im Übrigen auch mit beiden Input-Typen.

<form method="get" action="">
 <div>
  <input type="text" id="feld1" name="feld1" list="list1">
  <datalist id="list1">
   <option value="Amsel">
   <option value="Drossel">
   <option value="Eisvogel">
   <option value="Fink">
   <option value="Graugans">
   <option value="Meise">
   <option value="Spatz">
  </datalist> 
 </div>
 <div>
  <input type="search" id="feld2" name="feld2" list="list2">
  <datalist id="list2">
   <option value="Biber">
   <option value="Löwe">
   <option value="Mammut">
   <option value="Wollnashorn">
   <option value="Mufflon">
   <option value="Elch">
   <option value="Rentier">
  </datalist>
 </div>
</form>

und wieso kann ich die kiste nicht über die ID ansprechen wie jedes andere element auch, und mit innerHTML was reindrucken ...

Hänge mal einfach neue Optionen mit den passenden Values unterhalb der Datalist in das DOM ein. Das funktioniert.

Tschö, Auge

[1211chef]

hi auge,

das geht schon alles so wie du das sagst, aber in meinem script nicht. ich muss einfach suchen woran das liegt.

die notation in der datalist <option value="apfel">ist rot</option> funzt übrigens schon. "ist rot" wird als grauer text rechts neben dem wert angezeigt. zumindest im chrome, andere browser hab ich noch nicht gecheckt. oder meinst du mit "kein Inhalt" was anderes wie ich?

in meinem fall möchte ich den wert aber verstecken und möchte nur "ist rot" in der sichtbaren auswahlliste stehen haben.

---

wieso ich in die datalist mit innerHTML keine neuen options reinschreiben kann weiss ich noch nicht. muss einfach mal rumsuchen.

eine diskussion bringt aber immer lerneffekt.

gruss gustl

[sm]

in meinem fall möchte ich den wert aber verstecken und möchte nur "ist rot" in der sichtbaren auswahlliste stehen haben.

Und genau das geht doch hier nicht!

[1211chef]

in meinem fall möchte ich den wert aber verstecken und möchte nur "ist rot" in der sichtbaren auswahlliste stehen haben.

Und genau das geht doch hier nicht!

und genau deshalb brauche ich ne andere lösung. weisst du eine?

[Der Martin]

Hi,

ich kann zwar noch nicht sagen, wo dein Problem liegt. Ich sehe aber, dass du zwei mögliche Baustellen hast. Zum einen dein serverseitiges Script, zum andern dein clientseitiges AJAX-Handling.

    AJAX.onreadystatechange = function () 
    { 
      if (AJAX.readyState == 4) { zerlege(AJAX.responseText); } 
    } 

Hier reagierst du zwar auf den Status des XHR-Objekts "Antwort eingetroffen", aber du fragst nicht den HTTP-Status der Antwort ab. Es könnte ja auch ein 404 sein ...
Und hast du an der Stelle mal überprüft, wie die Antwort vom Server wirklich aussieht? Sowohl im Gutfall wie auch im Fehlerfall?

So long,
 Martin

PS: Das in HTML 5 neu eingeführte Element datalist sehe ich hier zum ersten Mal. Ich habe mich erst einmal vergewissert, dass es das auch wirklich gibt.

[1211chef]

hi @martin

.. Es könnte ja auch ein 404 sein ...

• ist nur ein testscript -

Und hast du an der Stelle mal überprüft, wie die Antwort vom Server wirklich aussieht? Sowohl im Gutfall wie auch im Fehlerfall?

ja hab ich, die lieferung ist wie gewünscht.

ich brauche vermutlich generell ne ganz andere lösung, wenn das mit dem search und der datalist so spackt. ich kann nicht mal einen value aus zahlen und buchstaben übergeben, weils die datalist dann nicht mehr anzeigt.

so ein sch***ß teil, bin am ärgern ...

gruss gustl

[1211chef]

dann wieder zurück zum alten thema.

was für möglichkeiten einer dynamischen auswahlliste gibt es noch?

verzweifelt guck*** gustl

[pl]

2 dinge sind mir aufgefallen.

1. setze autocomplete="off"
2. zerlege die Response nicht selbst, sondern sende gleich eine zweckmäßige, serverseitig erzeugte Datenstruktur (vor dem Senden Serialisieren zb. in einen json-string).

Schüne Größe.

[1211chef]

2. zerlege die Response nicht selbst, sondern sende gleich eine zweckmäßige, serverseitig erzeugte Datenstruktur (vor dem Senden Serialisieren zb. in einen json-string).

hi, mir schwirrt eh schon der kopf, der JSON muss warten.

würde lieber gerne wissen was ich mit innerHTML nicht schreiben kann. wieso kann ich zb. keine options zwischen <datalist></datalist> oder <select></select> schreiben? oder komplette elemente in ein <div></div>. ich dachte es wird einfach nur der eingabestring ausgegeben. eine komplette tabelle kann ich schreiben, hab ich probiert. wieso dann keine datalist oder kein select? das ist für mich unlogisch.

gruss gustl

[pl]

Du machst irgendwas falsch. Normalerweise solltest du mit jedem Listeneintrag aus Deiner ajax-Response option-Elemente angehängen und mit Attributen bestücken können. Wahrscheinlich suchst du die Methode .append():

z.B.:

        for(var ent in initialize){
            var option = document.createElement('option');
            option.value = ent;
            $('#legacy_entities').append(option);
        }

[Christian Kruse]

Hallo 1211chef,

würde lieber gerne wissen was ich mit innerHTML nicht schreiben kann.

Nichts.

wieso kann ich zb. keine options zwischen <datalist></datalist> oder <select></select> schreiben?

Doch, kannst du.

oder komplette elemente in ein <div></div>.

Natürlich geht auch das…

LG,
CK

[Matthias Apsel]

Hallo 1211chef,

würde lieber gerne wissen was ich mit innerHTML nicht schreiben kann. wieso kann ich zb. keine options zwischen <datalist></datalist> oder <select></select> schreiben? oder komplette elemente in ein <div></div>. ich dachte es wird einfach nur der eingabestring ausgegeben. eine komplette tabelle kann ich schreiben, hab ich probiert. wieso dann keine datalist oder kein select? das ist für mich unlogisch.

Es liegt mit Sicherheit nicht am Elementtyp. Vielleicht enthält dein String Anführungszeichen, die du nicht richtig maskiert hast?

Bis demnächst
Matthias

[1211chef]

Es liegt mit Sicherheit nicht am Elementtyp. Vielleicht enthält dein String Anführungszeichen, die du nicht richtig maskiert hast?

Bis demnächst
Matthias

danke matthias!! der funke war es

[1211chef]

hi matthias,

jetzt muss ich nur noch rausfinden wieso die datalist nicht selektiert wenn zahlen UND buchstaben drinstehen (siehe oben).

also <datalist><option value="80331"></datalist> wird gefunden wenn ich "8" eingebe

hingegen

<datalist><option value="80331 Muenchen"></datalist> wird NICHT gefunden wenn ich "8" eingebe

das klappt nur nicht wenn ich die options mit js innerHTML schreibe. im direkten beispiel geht es.

vielleicht hast du ja (oder wer) die zündende idee an was das liegt.

und vielleicht weiss auch jemand, wie ich den value maskiert übergeben kann. dann kann ich was, was die gurgel auch kann, aber nur mit 1% des aufwandes von denen.

schönen feUerabend gustl

[Auge]

Hallo

also <datalist><option value="80331"></datalist> wird gefunden wenn ich "8" eingebe

hingegen

<datalist><option value="80331 Muenchen"></datalist> wird NICHT gefunden wenn ich "8" eingebe

das klappt nur nicht wenn ich die options mit js innerHTML schreibe. im direkten beispiel geht es.

vielleicht hast du ja (oder wer) die zündende idee an was das liegt.

Hast du mal geschaut, was da per JS reingeschrieben wird? Bei FF geht das mit [STRG]+[a] und dann per Rechtsklick Kontextmenü⇒Auswahlquelltext anzeigen.

Tschö, Auge

[1211chef]

wieso klappert das nicht in einem perl script ...

  function zerlege(txt) 
  { 
    var inf = txt.split(\":\"); var alle = \"\";
	
	for (b = 0; b <= inf.length; b++) { alle = alle + \"<option value=\"\" + inf[b] + \">\"; }
	
	document.getElementById(\"druck\").innerHTML = \"<datalist id=\"liste\">\" + alle + \"</datalist>\";
  }

 <div id=\"druck\"> </div>

da kommt einfach nur gar nix. wenn ich genau so eine einfache tabelle schreibe wird sie ausgegeben. wieso ist das so?

gruss gustl

[1211chef]

ich habs schon,

perl packt die maskierungen nicht wenn sie innerhalb js stehen. so geht es:

  for (b = 0; b <= inf.length; b++) { alle = alle + \"<option value='\" + inf[b] + \"'>\"; }
	
  document.getElementById(\"druck\").innerHTML = \"<datalist id='liste'>\" + alle + \"</datalist>\";

mann, ich hatte das selbe problem schon mal vor 2-3 jahren und hab einfach nicht mehr dran gedacht.

gut, dass ihr mich jetzt nicht fluchen hört :-)

so long, gustl

[pl]

ich habs schon,

perl packt die maskierungen nicht wenn sie innerhalb js stehen. so geht es:

HTML mit Perl ausgeben? Tipp: Tu's nicht, benutze stattdessen ein Template-System. Ich empfehle HTML::Template das ist erstens ganz flott und zweitens im Core seit v5.8

--

[tinita]

Ich empfehle HTML::Template das ist erstens ganz flott und zweitens im Core seit v5.8

Nein, es ist nicht im core von perl.

% corelist HTML::Template

Data for 2015-12-13
HTML::Template was not in CORE (or so I think)

http://perlpunks.de/corelist/version?module=HTML%3A%3ATemplate

[pl]

Ich empfehle HTML::Template das ist erstens ganz flott und zweitens im Core seit v5.8

Nein, es ist nicht im core von perl.

Siehst Du, das ist auch einer der Gründe, warum Perl den Wettbewerb als PL fürs Web verloren hat.