ul list not scrolling on key press but it does with mouse wheel

bootstrap-typeahead, css, html, javascript, twitter-bootstrap-3

Solution

Final Edit:

Alright, I started having too much fun figuring this out, and finally have (hopefully you still need the solution!) Here is a working solution, building off of what I posted earlier. I hope it's what you were looking for!

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

Problem

I'm working with Bootstrap 3 and i have an autossugest input. The problem is that i want the `<ul>` to scroll with the keyboard keys but it doesn't work. I think scrolling with arrows keys is a default behavior but the `<ul>` doesn´t do it. Here is what is happening: If i press the down key twice: I'm using the typeahead developed by Bassjobsen. HTML code: ``` <input type="text" class="form-control" data-provide="typeahead" id="test"> ``` Javascript (with JQuery.js) code: ``` $('document').ready (function () { $('#test').typeahead({ source: ['algo', 'pepe', 'algo2', 'algo34', 'pepe3', 'algo42'], items: 'all', minLength: 2 }); }); ``` I set `items` to `all` to show all items in `source`. That's why i need to scroll them. I added this inline style to the generated `<ul>`: ``` style="max-height: 50px; overflow-y: auto;" ``` So this is the code generated by Bassjobsens library: ``` <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> ```

Original source