lista ul non scorrimento su pressione di un tasto, ma lo fa con la rotella del mouse

Question

Sto lavorando con Bootstrap 3 e ho un ingresso autossugest. Il problema è che voglio che lo <ul> scorra con i tasti della tastiera ma non funziona. Penso che lo scorrimento con i tasti delle frecce sia un comportamento predefinito, ma lo <ul> non lo fa. Ecco cosa sta accadendo:

se si preme il tasto giù due volte:

sto usando il typeahead sviluppato da Bassjobsen.

codice HTML:

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

Javascript (con jquery.js) Codice:

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

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

}); 

ho impostato items-all per mostrare tutti gli elementi in source. Ecco perché ho bisogno di scorrere loro.

ho aggiunto questo stile in linea al generata <ul>:

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

Quindi questo è il codice generato da Bassjobsens libreria:

<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

Edit finale:

Va bene, ho iniziato ad avere troppo divertente capirlo, e finalmente averlo (si spera che tu abbia ancora bisogno della soluzione!) Here è una soluzione funzionante, costruita su quello che ho ostentato in precedenza. Spero sia quello che stavi cercando!

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