jquery навигация + выделение <li>элементов на key.code нажата

Question

Привет, я планирую создать список ul li и сделать его пригодным для навигации, выделив <li> элементы

, поэтому начиная с:

<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>

я бы хотел перейти <li> элементы следующим образом:

1. Пользователь нажимает клавишу «вниз» (как для списков автозаполнения), и он вводит <ul></ul>
2. Пользователь нажимает клавишу влево / вправо, и он выделяет+1 или -1 <li> item
3. Пользователь нажимает клавишу вверх и выходит из <ul></ul>

. Может ли кто-нибудь помочь мне в этом?

ohohoho :) я только что нашел прекрасный пример: взгляните на стек автозаполнения ввода тегов stackoverflow :) (это то же самое, что я хотел бы сделать для моего элемента ul :))

Answer 1

Вот, пожалуйста, http://jsfiddle.net/ebiewener/8Tg4H/

Answer 2

Не уверен, где именно вы хотите прослушивать keydown события, но это работает для всего 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");
    }
});

Пример: http://jsfiddle.net/WeNdW/