Enabling keyboard navigation in the Bootstrap dropdown-menu

Question

Is it possible to navigate using the keyboard to the drop down menu using Tab, and navigate using the arrow keys to the sub elements of the drop down?

Her

Answer 1

Nice example.

But, Why did you set a setTimeout? Some specific reason?

setTimeout(function(){
    $(".search-option:first").focus();
},100);

I made the same example, simulating an input select box, without a timeout. Check this out.

Answer 2

Update

Bootstrap now supports up/down keys as standard.

So if you want Tab to activate the dropdown, just get the key code (9) and do the following:

$('.input-group input').keydown(function(e){
    if(e.which == 9){ // tab
        e.preventDefault();
        $(this).parent().find('.dropdown-toggle').click();
        $(this).parent().find('.dropdown-menu a:first').focus();
    }
});

And if you want to add further functionality for when the user is focused on a dropdown menu item:

$('.dropdown-menu a').keydown(function(e){
    switch(e.which){
        case 36: // home
            e.preventDefault();
            $(this).closest('.dropdown-menu').find('a:first').focus();
            break;
        case 35: // end
            e.preventDefault();
            $(this).closest('.dropdown-menu').find('a:last').focus();
            break;
    }
});

See this JSFiddle for a demo.