JavaScript input Suche: Auswahlliste bei Klick in die Umgebung ausblenden

lordg2009

Lt. Commander
Registriert
Apr. 2009
Beiträge
1.503
Hi,

ich habe ein 'input' Tag und danach eine Liste mit allen Auswahlmöglichkeiten. Diese Möglichkeiten werden per xml vorgeladen. Im Prinzip soll es funktionieren, wie ein select Feld, nur dass ich ein Textfeld habe, in dem auch geschrieben werden kann. Per Regex werden dann nur jene Listenelemente angezeigt, die dem Suchmuster entsprechen.

HTML:
<div>
 <input onkeyup="filterPattern(this.value);" onactive="toggleList(1);" onblur="toggleList(0);" data-key="" type="search">
 <ul id="list_1">
  <li onclick="loadListItem(this);" data-key="10583">Item1</li>
  <li onclick="loadListItem(this);" data-key="57289">Item2</li>
 </ul>
</div>

<script>
 function toggleList(stat) {
  if(stat == 1) {
   document.getElementById("list_1").style.display = "block";
  } else {
   document.getElementById("list_1").style.display = "none";
  }
 }
</script>

Der Code ist nachgeschrieben, da ich aktuell nicht zu Hause bin.

Das Problem:
Wenn ich ein Element aus der Liste anklicke, wird es nicht geladen, obwohl die Funktion richtig ist. Das liegt daran, dass erst das onblur-event ausgeführt wird und die Liste nach dem Klick nicht mehr angezeigt wird und ich somit ins leere klicke.

Ich habe es schon mit dem html5 Tag datalist probiert, das hat mir aber nicht gefallen, weil es auf dem Tablet nicht funktioniert hat und ich in den option Tag der datalist keine Attribut unterbringen konnte, welches bei Klick auch mit übertragen wird.

Habt ihr eine Lösung?
Ideal wäre es ja, wenn man erreichen könnte, dass das onclick Event der Liste vor dem onblur Event des input Feldes ausgeführt würde.

Vielen Dank für eure Hilfe
 
Zurück
Oben