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):
Der Einfachheit halber wollte ich zuerst das springen durch die Liste umsetzen:
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:
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ß.
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):
HTML Code:
<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>
Code:
$('.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'); } });
Hier ist der Schnipsel für das Suchfeld:
Code:
$('#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(); } } });
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ß.