Scroll Verhalten merkwürdig in ul li

Question

Ich versuche Auto-Scrolling zu implementieren, wenn der Benutzer drückt nach oben oder unten Pfeiltaste der nächste oder vorherige Artikel sollte jeweils ausgewählt werden. Wenn das ausgewählte Objekt nicht im sichtbaren Bereich ist, sollte es in den sichtbaren Bereich gescrollt werden.

Also, ich habe versucht, das zu tun, aber das Scrollen funktioniert nicht wie erwartet. Hier

ist der Link zu meinem

JS Fiddle

jsfiddle link

Wenn Sie hier, um den Code zu sehen:

HTML:

<div class="combobox"> 
    <input type="text" class="txtbox"/> 
    <button class="txtbox-btn">GO</button> 
</div> 
<ul class="combobox-options"> 
    <li><span>AAA</span></li> 
    <li><span>BBB</span></li> 
    <li><span>CCC</span></li> 
    <li><span>DDD</span></li> 
    <li><span>AAA1</span></li> 
    <li><span>AAA2</span></li> 
    <li><span>AAA3</span></li> 
    <li><span>BBB1</span></li> 
    <li><span>BBB2</span></li> 
    <li><span>BBB3</span></li> 
    <li><span>CCC1</span></li> 
    <li><span>CCC2</span></li> 
    <li><span>CCC3</span></li> 
</ul> 

CSS:

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

ul{ 
    list-style-type: none; 
    padding: 0px; 
    margin: 0px; 
} 

/*html, input, textarea, a{ 
    font-family: 'Montserrat'; 
}*/ 

input[type="text"].txtbox { 
    color: #000000; 
    height: 60px; 
    width: 260px; 
    font-size: 22px; 
    /*border: none;*/ 
    padding-left: 21px; 
} 

.txtbox-btn { 
    width: 60px; 
    height: 60px; 
    background: #1f7f5c; 
    border: none; 
    text-align: center; 
    text-decoration: none; 
    line-height: 60px; 
    color: #fff; 
} 

.combobox { 
    position: relative; 
    width: 320px; 
    height: 60px; 
} 

.combobox input[type="text"].txtbox, 
.combobox .txtbox-btn{ 
    position: absolute; 
} 

.combobox .txtbox-btn{ 
    right: 0; 
} 

.combobox + .combobox-options{ 
    width: 320px; 
    position: absolute; 
    background: #1f7f5c; 
    color: #fff; 
} 

.combobox + .combobox-options li { 
    height: 50px; 
    padding: : 12px; 
    border-bottom: 1px solid #2a8664; 
    display: table; 
    width: 100%; 
} 

.combobox + .combobox-options li span { 
    padding-left: 21px; 
    font-size: 22px; 
    display: table-cell; 
    vertical-align: middle; 
} 

.selected { 
    background: #0055ee; 
} 

.combobox-options{ 
    max-height: 200px; 
    overflow-y: scroll; 
    overflow-x: hidden; 
} 

JQuery:

$('input').on('keydown', function(e){ 
    var $results = $('.combobox-options li span'); 

    if(e.keyCode == 40) { //down arrow 
    if($($results).hasClass('selected')){ 
     var selectedComboItem = $($results).filter('.selected'); 
     if(selectedComboItem.parents('li').next().length == 1){ 
     $('.selected').removeClass('selected'); 
     selectedComboItem.parents('li').next().children('span').addClass('selected'); 
     scrollMe(selectedComboItem, $('.combobox-options')); 
     } else { 
     $('.selected').removeClass('selected'); 
     } 
    } 
    else { 
     $results.first().addClass('selected'); 
     scrollMe(selectedComboItem, $('.combobox-options')); 
    } 

    e.preventDefault(); 
    } 

    if(e.keyCode == 38) { //up arrow 
    if($results.hasClass('selected')){ 
     var selectedComboItem = $($results).filter('.selected'); 
     if(selectedComboItem.parents('li').prev().length == 1){ 
     $('.selected').removeClass('selected'); 
     selectedComboItem.parents('li').prev().children('span').addClass('selected'); 
     scrollMe(selectedComboItem, $('.combobox-options')); 
     } else { 
     $('.selected').removeClass('selected'); 
     } 
    } 
    else { 
     $results.last().addClass('selected'); 
     scrollMe(selectedComboItem, $('.combobox-options')); 
    } 

    e.preventDefault(); 
    } 

}); 
function scrollMe(element, container){ 
    var offset = $(container).find('li').first().position().top; 
    $(container).scrollTop($(element).position().top - offset); 
}; 

Answer 1

hatte Sie vergessen selectedComboItem in allen Ihren if-else Aussagen neu zuzuweisen. Ohne dass Sie jedes Mal zum falschen Element gescrollt wurden und bei der ersten Änderung Fehler bekommen haben, weil Sie in Ihrer else Anweisung nie selectedComboItem initialisiert haben.

Und nicht $($result) verwenden, wird dies doppelt Ihr jQuery-Objekt in einem jQuery-Objekt erneut zu werfen.

Working example.