Jquery key up and down. Search results navigation.

Question

I have an input field that, when typed, displays a div called "sentences" and compiles it with the search results, each result is displayed between p-tags.

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

I have it so far that if you click the suggestion box again (I know that it will already be displayed), but that’s another problem) and attepts will add focus to the first p tag. how can I use it, as you continue to click on it, filters the results, allows you to add and remove the class of "active" every time. and obviously the same in order to rise?

I found so many random plugins, but they all seem complicated and cumbersome for what I'm 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();

    }
});

thank

Answer 1

AutoComplete is a widget supported by the jQuery team. He has the ability to select using the arrow keys and enter. It is also a simple plugin in its core (with the ability to easily expand functionality).

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

Cheers awirick