Vorschlag für input Feld wird nicht übernommen

[Rolf B]

Hallo dedlfix,

Full ack. Das Dropdown wird im onblur geschlossen und bekommt den click nicht mehr ab.

Dringende Empfehlung: Kein Javascript-Monstrum für die Liste liefern. Zum einen ist ein Event-Handler in onTralala Attributen hier sehr umständlich - du musst ihn an jedes Span einzeln drankleben - und zum anderen hast Du gesehen, wie schlecht das zu debuggen ist.

Wenn's schon fertiges HTML sein soll, dann ohne JavaScript in der Tasche, aber mit data- Attributen (passend mit special chars maskiert):

<span id='such_12770' data-plz='99625' data-ort='Kölleda' data-land='D' data-GPS=','>D-99625 Kölleda</span>

Dazu ein einziger Click-Handler auf das .vorschlaege DIV, der beim Laden der Seite montiert wird. Der bekommt am Werk ein Event-Objekt als Parameter, in diesem Objekt gibt's eine Eigenschaft "target" in dem das geklickte Element zu finden ist.

Daraus kann man die data-Attribute auslesen und die Maske entsprechend bestücken.

Was mir noch besser gefiele, wäre dies: Statt fertigem HTML kannst Du auch ein JSON-serialisiertes Objekt liefern (ja, lieber pl, es könnte auch eine EAV Liste sein 😉). Es könnte diese Struktur haben:

{ "12770": { plz: '99625', ort: "Kölleda", land: "D", GPS: { x: 0, y: 0 } }, … }

und du baust nach Empfang daraus am Client HTML zusammen. Das sollte dann aber kein DIV als Container mit span als Inhalt sein, sondern ein ul mit li darin, die Du entsprechend stylest.

<ul class="vorschläge">
  <li id="such_12770">D-12770 Kölleda</li>
</ul>

reicht. Die li Elemente bitte nicht einzeln in die ul hängen, das kann bei größeren Listen sehr lange dauern. Entweder ein DocumentFragment konstruieren und dann einhängen, oder einen langen String mit dem ganzen HTML-Inneren für das ul Element zusammensetzen und dann das innerHTML des ul setzen.

Der Click-Handler findet bei dieser Lösung bei Click auf ein li ein Attribut ID="such_12770" und greift für den Rest der Daten auf das Json-Objekt zurück.

Rolf