如何在键盘上启用箭头导航以获取使用jQuery的Div列表

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/