jQuery: Mit Pfeiltasten durch Liste springen

[DaDyne]

Hallo,

ich schreibe derzeit eine Suche mit Auto-Suggest-Funktion und möchte gerne implementieren, dass er Benutzer mittels Pfeiltasten vom Suchfeld zu den Vorschlägen springen kann, sich durch die Vorschläge bewegen kann und auch wieder zum Suchfeld springen kann.

Mein Markup sieht etwa so aus (nachdem per AJAX Vorschläge geholt wurden):

<div class="inputwrap">
  <input type="text" autocomplete="off" name="q" id="q" />
  <input type="submit" value="Suche"/>
  <div class="suggests">
    <ul>
      <li><a href="linktofirstitem/">1. Vorschlag</a></li>
      <li><a href="linktoseconditem/">2. Vorschlag</a></li>
      <li><a href="linktothirditem/">3. Vorschlag</a></li>
    </ul>
  </div>
</div>

Der Einfachheit halber wollte ich zuerst das springen durch die Liste umsetzen:

$('.inputwrap .suggests a').keyup(function(event){
	
		// check if cursor key were used
	if(event.keyCode == 40 || event.keyCode == 38){
		console.log(event.Keycode+' was pressed');
	}
	
});

Wenn ich jetzt mit Tabs zu einem Link in der Ergebnisliste navigiere und dann die Pfeiltaste nach unten drücke, wird nichts in die Console geloggt. Das heißt keyup wird nicht gefeuert.

Hier ist der Schnipsel für das Suchfeld:

$('#q').keyup(function(event){
	
		// check if cursor key were used
	if(event.keyCode == 40 || event.keyCode == 38){
		console.log(event.Keycode+' was pressed');
	}else{
              	var s = $('.inputwrap .suggests');
		if (this.value.length > 2) { 
			s.load('http://www.example.com/query/'+encodeURI(this.value)+'/suggest.data');
			s.show();
		}else{
			s.html('');
			s.hide();
		}
	}
	
});

Hier wird das keyup-Event gefeuert, mein AJAX-Request funktioniert und bei Pfeiltasten wird entsprechend in der Console geloggt.

Warum wird $('.inputwrap .suggests a').keyup() nicht gefeuert? Ich habe auch schon keydown() versucht. Bin froh um alle Tipps. Auch um einen völlig neuen Ansatz falls es jemand besser weiß.