ul列表不滾動的按鍵，但它與鼠標滾輪

Question

我正在使用Bootstrap 3，我有一個autosugest輸入。問題是我想<ul>與鍵盤鍵滾動，但它不起作用。我認爲使用箭頭鍵滾動是默認行爲，但<ul>沒有做到。這裏是正在發生的事情：

如果我按向下鍵兩次：

我使用Bassjobsen開發的typeahead。

HTML代碼：

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

的Javascript（帶的jquery.js）代碼：

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

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

}); 

我設置items到all以顯示source所有項目。這就是爲什麼我需要滾動它們。

我加入這個內嵌樣式生成的<ul>：

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

所以這是Bassjobsens庫生成的代碼：

<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

最後編輯：

好吧，我開始有太多的樂趣弄清楚這一點，並最終有（希望你仍然需要解決方案！）Here是一個工作的解決方案，建立了我p早些時候開始。我希望這是你正在尋找的！

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