ul Liste nicht scrollen auf Tastendruck, aber es tut mit Mausrad

Question

Ich arbeite mit Bootstrap 3 und ich habe eine Autosossest-Eingabe. Das Problem ist, dass ich die <ul> mit den Tasten der Tastatur scrollen möchte, aber es funktioniert nicht. Ich denke, Scrollen mit den Pfeiltasten ist ein Standardverhalten, aber die <ul> tut es nicht. Hier ist, was passiert:

Wenn ich die Abwärts-Taste zweimal drücken:

Ich bin mit dem typeahead entwickelt von Bassjobsen.

HTML-Code:

<input type="text" class="form-control" data-provide="typeahead" id="test"> 

Javascript (mit jquery.js) Code:

$('document').ready (function() { 

    $('#test').typeahead({ 
     source: ['algo', 'pepe', 'algo2', 'algo34', 'pepe3', 'algo42'], 
     items: 'all', 
     minLength: 2 
    }); 

}); 

I items-all setzen alle Elemente in source zu zeigen. Deshalb muss ich sie scrollen.

Ich habe diesen Inline-Stil auf die erzeugte <ul>:

style="max-height: 50px; overflow-y: auto;" 

So dies der Code durch Bassjobsens Bibliothek erzeugt wird:

<ul class=" dropdown-menu" style="max-height: 50px; overflow-y: auto; top: 73px; left: 20px; display: none;" "=""> 
    <li class="active"> 
    <a href="#"><strong>al</strong>go</a> 
    </li> 
    <li> 
    <a href="#"><strong>al</strong>go2</a> 
    </li> 
    <li> 
    <a href="#"><strong>al</strong>go34</a> 
    </li> 
    <li> 
    <a href="#"><strong>al</strong>go42</a> 
    </li> 
</ul> 

Answer 1

Finale Edit:

Okay, ich begann mit zu viel Spaß herauszufinden, und schließlich haben (hoffentlich brauchen Sie immer noch die Lösung!) Here ist eine funktionierende Lösung, aufbauend auf was ich p früher. Ich hoffe es ist das was du gesucht hast!

$('#test').keydown(function(e) { 
    if($('.dropdown-menu').is(':visible')) { 

     var menu = $('.dropdown-menu'); 
     var active = menu.find('.active'); 
     var height = active.outerHeight(); //Height of <li> 
     var top = menu.scrollTop(); //Current top of scroll window 
     var menuHeight = menu[0].scrollHeight; //Full height of <ul> 

     //Up 
     if(e.keyCode == 38) { 
      if(top != 0) { 
       //All but top item goes up 
       menu.scrollTop(top - height); 
      } else { 
       //Top item - go to bottom of menu 
       menu.scrollTop(menuHeight + height); 
      } 
     }  
     //Down 
     if(e.keyCode == 40) { 
      //window.alert(menuHeight - height); 
      var nextHeight = top + height; //Next scrollTop height 
      var maxHeight = menuHeight - height; //Max scrollTop height 

      if(nextHeight <= maxHeight) { 
       //All but bottom item goes down 
       menu.scrollTop(top + height); 
      } else { 
       //Bottom item - go to top of menu 
       menu.scrollTop(0); 
      } 
     } 
    } 
});