自动完成滚动答案

【问题标题】：Autocomplete scroll自动完成滚动
【发布时间】：2014-05-16 12:22:32
【问题描述】：

我有一个这样的列表：http://jsfiddle.net/Vtn5Y/559/

var li = $('li');
var liSelected;
$(window).keydown(function(e){
    if(e.which === 40){
        if(liSelected){
            liSelected.removeClass('selected');
            next = liSelected.next();
            if(next.length > 0){
                liSelected = next.addClass('selected');
            }else{
                liSelected = li.eq(0).addClass('selected');
            }
        }else{
            liSelected = li.eq(0).addClass('selected');
        }
    }else if(e.which === 38){
        if(liSelected){
            liSelected.removeClass('selected');
            next = liSelected.prev();
            if(next.length > 0){
                liSelected = next.addClass('selected');
            }else{
                liSelected = li.last().addClass('selected');
            }
        }else{
            liSelected = li.last().addClass('selected');
        }
    }
});

现在我想知道如何让 div 向下滚动以查看所选项目。

谢谢！

【问题讨论】：

Ps：我想自己做，不会使用自动完成插件。

标签： javascript jquery html css

【解决方案1】：

抱歉，我的第一个答案有问题。

试试这个：

var li = $('li');
var liSelected;
$(window).keydown(function(e){
    if(e.which === 40){
        if(liSelected){
            liSelected.removeClass('selected');
            next = liSelected.next();
            if(next.length > 0){
                liSelected = next.addClass('selected');
            }else{
                liSelected = li.eq(0).addClass('selected');
            }
        }else{
            liSelected = li.eq(0).addClass('selected');
        }
    }else if(e.which === 38){
        if(liSelected){
            liSelected.removeClass('selected');
            next = liSelected.prev();
            if(next.length > 0){
                liSelected = next.addClass('selected');
            }else{
                liSelected = li.last().addClass('selected');
            }
        }else{
            liSelected = li.last().addClass('selected');
        }
    }
    $('div').scrollTop(liSelected.position().top - $('div').position().top + $('div').scrollTop());
});

JSFidle here

【讨论】：

谢谢！祝你有美好的一天！

【解决方案2】：

这里有一个类似的问题：How to scroll to specific item using jQuery?

解决方案是像这样使用 scrollTop 属性：

var container = $('div'),
scrollTo = $('#row_8');

container.scrollTop(
    scrollTo.offset().top - container.offset().top + container.scrollTop()
);

// Or you can animate the scrolling:
container.animate({
    scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
});

工作示例：http://jsfiddle.net/xY7tx/406/

【讨论】：

谢谢！这在像 FabioG 的答案一样实施时有效。