自动完成滚动

Posted 2023-03-10

【中文标题】自动完成滚动

【英文标题】：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：我想自己做，不会使用自动完成插件。

【参考方案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 的答案一样实施时有效。