Question

Hi i’m planning to make a ul li list and make it navigable highlighting the <li> items

so starting from:

<ul>
<li>
<a class="a">hey</a>
</li>
<li>
<a class="a">hey you!</a>
</li>
<li>
<a class="a">hey what's up?</a>
</li>
<li>
<a class="a">hey hey</a>
</li>
</ul>

i would like to navigate <li> items in this way:

1. User clicks key ‘down’ (as for autocomplete lists) and he enter the <ul></ul>
2. User clicks key left/right and he highlight the +1 or -1 <li> item
3. User clicks key up and he exit the <ul></ul>

is there someone can help me on doing this?

ohohoho 🙂 i just founded the perfect example : take a look at stackoverflow tags input autocomplete list 🙂 (it’s the same thing i would like to do for my ul item 🙂 )

Answer 1

Not sure where exactly you want to listen for keydown events, but this works for the entire document:

$(document).bind("keydown", function (e) {
    var $prev, $next, $current = $("ul li.highlight");

    if (e.which === 40 && !$current.length) {
        $("ul li:first").addClass("highlight");
    } else if (e.which === 39) {
        $next = $current.next("li");
        if ($next.length) {
            $current.removeClass("highlight");
            $next.addClass("highlight");
        }

    } else if (e.which === 37) {
        $prev = $current.prev("li");
        if ($prev.length) {
            $current.removeClass("highlight");
            $prev.addClass("highlight");
        }
    } else if (e.which === 38) {
        $("ul li").removeClass("highlight");
    }
});

Example: http://jsfiddle.net/WeNdW/