Autocomplete scroll

Question

I have a list like this: 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');
        }
    }
});

Now I wonder how I can make the div scroll down to be able to see the selected item.

Thank you!

Ps: I want to make it on my own and won't use an autocomplete plugin. — Onovar, Apr 04 '14 at 09:17

score 2 · Answer 1 · edited May 23 '17 at 10:24

2

There is a similar question here: How to scroll to specific item using jQuery?

Solution is to use the scrollTop property like so:

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

Working example: http://jsfiddle.net/xY7tx/406/

edited May 23 '17 at 10:24

Community

1
1

answered Apr 04 '14 at 09:40

Daniel Knecht

41
2

Thanks! this works when implemented like the answer of FabioG. – Onovar Apr 04 '14 at 09:55

FabioG · Accepted Answer · 2014-04-04T09:48:45.153

sorry, my first answer had a problem.

try this:

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

Autocomplete scroll

2 Answers2