список ul не прокручивается при нажатии клавиш, но с помощью колесика мыши

Я работаю с Bootstrap 3, и у меня есть автоматически вводимые данные. Проблема в том, что я хочу<ul> прокручивать с помощью клавиш клавиатуры, но это не работает. Я думаю, что прокрутка с помощью клавиш со стрелками является поведением по умолчанию, но<ul> не делает этого Вот что происходит:

Если я нажму клавишу вниз дважды:

Я используюмашинописный разработанный Bassjobsen.

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>

Ответы на вопрос(1)

Ваш ответ на вопрос