JavaScript input Suche: Auswahlliste bei Klick in die Umgebung ausblenden

[lordg2009]

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.

<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

 

[g0dda]

http://www.barryvan.com.au/2009/01/onfocus-and-onblur-for-divs-in-fx/

Beim schnellen drüberlesen hat sich der Ansatz ganz interessant angehört, vielleicht kannst du damit was anfangen. So sollte das blur-Event erst abgefeuert werden, wenn du außerhalb deines divs klickst.