Question

hey guys,
probably a simpel question, however couldn’t find anything online.

i have a list with search results and i want to be able to navigate through the list with my up and down keys.

    if (e.keyCode == 40) { //down
        //alert('down');
        $('#searchresults ul li').each(function() { 

        });
    }

    if (e.keyCode == 38) { //up
        //alert('up');
    }

    if (e.keyCode == 13) { //enter
        //alert('enter');
    }

the searchresults look like this:

<ul>
    <li class="matched"><a href="link1">link1</a></li>
    <li class="matched"><a href="link2">link2</a></li>
    <li class="matched"><a href="link3">link3</a></li>
</ul>

So basically i just want to be able to navigate through my searchresults with the up and down keys. the selection of the current element should maybe just change the background color and when i press enter the linked and matched element is fired.

any idea how i can iterate through the searchresults?
thank you

edit:

var pressedCount = 0;

if (e.keyCode == 40) { //down
    console.log(pressedCount);
    $('#searchresults ul li').index(pressedCount).addClass('selected');
    pressedCount++;
}

does not work, because i’m doing something wrong with the index-method. However the pressedCount var increments on every arrowkeydown trigger.

Answer 1

Working demo: http://jsfiddle.net/zBjrS/1/

(You have to click the page first, in order to focus the IFRAME.)