Как включить навигацию по стрелкам на клавиатуре для списка Div, используя jQuery

Question

Я следую учебному пособию [здесь][1], чтобы сделать Facebook похожей на систему меток друзей. Но в этом учебнике отсутствует возможность "навигации по стрелкам", как в Facebook. Я хотел бы выяснить, как этого добиться.

По сути, когда я вводю текст в contenteditable области, он генерирует div предложенных друзей, как показано ниже:

<div class="display_box">    
   <img src="user_img/John.jpg">
   <a href="#" class="addname" title="John">John</a><br>
   <span>India</span>
</div>
<div class="display_box">    
   <img src="user_img/Peter.jpg">
   <a href="#" class="addname" title="Peter">Peter</a><br>
   <span>USA</span>
</div>
<div class="display_box">    
   <img src="user_img/Mary.jpg>
   <a href="#" class="addname" title="Mary">Mary</a><br>
   <span>UK</span>
</div>

Они все div с именем класса display_box, Я могу нажать на поле и выбрать их:

$('div').on("click",".display_box",function(e) {
    // do the stuffs
}); 

Я бы хотел, чтобы мои пользователи могли использовать клавиатуру, нажимая клавишу вверх или клавишу вниз для перемещения между вариантами выбора, а также клавишу ввода для запуска выбора. Любые идеи, как я могу сделать это? Большое спасибо!

Answer 1

Вам нужно связать события клавиатуры keyup/keydown а затем изменить CSS соответственно, чтобы дать ощущение move up или же move down:

использование keyup если вы хотите сделать одно движение даже при нажатии клавиши, независимо от того, нажата ли она долго.

использование keydown если вы хотите двигаться в цикле, пока пользователь удерживает клавишу.

$("#search").keyup(function(e) 
{
        if (e.keyCode == 40) 
        {  
            Navigate(1);
        }
        if(e.keyCode==38)
        {
            Navigate(-1);
        }

});

Проверьте полный код @fiddle: http://jsfiddle.net/MKZSE/77/