Javascript ul列表在按键时不滚动，但在鼠标滚轮上滚动

我正在使用Bootstrap3，我有一个AutoSugest输入。问题是我想让

用键盘键滚动，但它不工作。我认为使用箭头键滚动是一种默认行为，但是

不能做到这一点。以下是正在发生的事情：

如果我按两次向下键：

我用的是Basjobsen开发的

HTML代码：

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

我将

items

设置为

all

以显示

source

中的所有项目。这就是为什么我需要滚动它们

我将此内联样式添加到生成的

：

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>

最终编辑：

好吧，我开始有太多的乐趣来解决这个问题，最后（希望你仍然需要解决方案！）是一个有效的解决方案，建立在我之前发布的基础上。我希望这就是你想要的

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

$（“#测试”）.keydown（函数（e）{
如果（$（'.dropdown menu'）。是（':visible'））{
变量菜单=$（'.下拉菜单'）；
var active=menu.find（'.active'）；
var height=active.outerHeight（）；//高度

var top=menu.scrollTop（）；//滚动窗口的当前顶部
var menuHeight=菜单[0]。滚动高度；//整个

//向上
如果（e.keyCode==38）{
如果（顶部！=0）{
//除最上面的商品外，其他商品都涨价了
菜单。滚动顶部（顶部-高度）；
}否则{
//顶部项目-转到菜单底部
菜单。滚动顶部（菜单高度+高度）；
}
}    
//向下
如果（e.keyCode==40）{
//窗口警报（菜单高度-高度）；
var nextHeight=top+height；//下一个滚动顶部高度
var maxHeight=menuHeight-height；//最大滚动顶部高度
如果（下一步）非常感谢您的时间！但这不是我想要的。在您的解决方案中，列表中的所有元素都显示为一个，这就是您可以选择它们的原因。在我的真实应用程序中，ul有大约70个项目，因此您需要ul滚动，每次ul滚动时，我都需要显示所选元素。有关于该问题的更新吗？
$('#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);
            }
        }
    }
});