Question

I have an input box that as you type displays a div called “suggestions” and compiles it with search results, each result is displayed between p tags.

You can select a result using the mouse but I would like to be able to select one using up and down keys.

I have got it so far that if you press down the suggestions box appears again (I know it would already be displayed- but thats another issue), and attepts to add focus to the first p tag. how can I have it so as you keep pressing down it filters through the results lets say adds and removes a class of “active” each time. and obviously the same for going up as well?

I have found so many random plugins but they all seem to complex and bulky for what I am trying to achieve.

$('#search input#q').keypress(function (e) {
    switch (e.keyCode) {
        // User pressed "up" arrow
    case 38:
        $('#suggestions').fadeOut('fast');
        break;

    case 40:
        // User pressed "down" arrow
        $('#search input#q').blur();
        $('#suggestions').fadeIn();
        $('#suggestions p').focus();

    }
});

Thanks

Answer 1

Autocomplete is a jQuery team supported widget. It has the ability to select using arrows keys and enter. It is also a simple plugin at its core (with the ability to easily extend functionality).

http://jqueryui.com/demos/autocomplete/

Cheers,
awirick