danh sách ul không cuộn trên phím bấm nhưng nó có với bánh xe chuột

Question

Tôi đang làm việc với Bootstrap 3 và tôi có một đầu vào autossugest. Vấn đề là tôi muốn <ul> để cuộn bằng các phím trên bàn phím nhưng nó không hoạt động. Tôi nghĩ rằng việc cuộn bằng các phím mũi tên là một hành vi mặc định nhưng <ul> không thực hiện điều đó. Đây là những gì đang xảy ra:

Nếu tôi bấm phím xuống hai lần:

Tôi đang sử dụng typeahead phát triển bởi Bassjobsen.

HTML code:

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

Javascript (với jquery.js) mã:

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

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

}); 

tôi đặt items-all để hiển thị tất cả các mục trong source. Đó là lý do tại sao tôi cần phải cuộn chúng.

tôi thêm phong cách nội tuyến này đến tạo <ul>:

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

Vì vậy, đây là mã được tạo ra bởi Bassjobsens thư viện:

<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

cuối cùng Edit:

Alright, tôi bắt đầu có quá nhiều niềm vui tìm ra điều này, và cuối cùng có (hy vọng bạn vẫn cần giải pháp!) Here là một giải pháp làm việc, xây dựng ra những gì tôi p khai thác sớm hơn. Tôi hy vọng đó là những gì bạn đang tìm kiếm!

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