我正在尝试实现自动滚动,当用户按下向上或向下箭头键时,应分别选择下一个或上一个项目。此外,如果所选项目不在可见区域,则应滚动到可见区域。
所以,我试图这样做,但滚动不能按预期工作。
这是我的
的链接
如果您想在此处查看代码:
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);
};
答案 0 :(得分:1)
您忘记在所有selectedComboItem
语句中重新分配if-else
。没有它,你每次都滚动到错误的元素,并在第一次更改时出错,因为在else
语句中你从未初始化selectedComboItem
。
不要使用$($result)
,这会再次将jQuery对象再次转换为jQuery对象。
<强> Working example. 强>