उल सूची कुंजी प्रेस पर स्क्रॉल नहीं करता है लेकिन यह माउस व्हील

Question

के साथ करता है मैं बूटस्ट्रैप 3 के साथ काम कर रहा हूं और मेरे पास एक स्वतः इनपुट है। समस्या यह है कि मैं कीबोर्ड कुंजी के साथ स्क्रॉल करने के लिए <ul> चाहता हूं लेकिन यह काम नहीं करता है। मुझे लगता है कि तीर कुंजियों के साथ स्क्रॉलिंग एक डिफ़ॉल्ट व्यवहार है लेकिन <ul> ऐसा नहीं करता है। तो मैं नीचे कुंजी को दो बार दबाएं

:

मैं typeahead Bassjobsen द्वारा विकसित का उपयोग कर रहा यहाँ क्या हो रहा है है।

एचटीएमएल कोड:

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

जावास्क्रिप्ट (JQuery.js के साथ) कोड:

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

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

}); 

मैं all को items सेट 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> 

Answer 1

अंतिम संपादित करें:

ठीक है, मैं होने लगा यह बहुत मजेदार है, और अंत में (उम्मीद है कि आपको अभी भी समाधान की आवश्यकता है!) Here एक कामकाजी समाधान है, जो मैं पी पहले osted। मुझे आशा है कि यह वही है जो आप खोज रहे थे!

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