Lista ul nie przewija się po naciśnięciu klawisza, ale robi to za pomocą kółka myszy

Question

Pracuję z Bootstrap 3 i mam autosugestowe wejście. Problem polega na tym, że chcę, aby <ul> przewijać za pomocą klawiszy klawiatury, ale to nie działa. Myślę, że przewijanie za pomocą klawiszy strzałek jest domyślnym zachowaniem, ale <ul> tego nie robi. Oto co się dzieje:

Jeśli i dwukrotnie nacisnąć klawisz w dół:

Używam typeahead opracowany przez Bassjobsen.

HTML kod:

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

Javascript (z jquery.js) Kod:

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

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

}); 

ustawić items do all pokazać wszystkie przedmioty w source. Właśnie dlatego muszę je przewijać.

dodałem ten wbudowany styl do wygenerowanego <ul>:

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

Więc jest to kod wygenerowany przez Bassjobsens Biblioteka:

<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

Finał Edit:

Dobra, zacząłem mieć za dużo zabawy, wymyślając to i wreszcie (mam nadzieję, że nadal potrzebujesz rozwiązania!) Here to działające rozwiązanie, budowanie tego, co ja p osted wcześniej. Mam nadzieję, że tego właśnie szukałeś!

$('#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); 
      } 
     } 
    } 
});