在列表项中启用键盘（向上/向下箭头）

Question

我的标记为

<input id="field" type="text" />
 <ul>
  <li class="item"><a href="#">one</a></li>
  <li class="item"><a href="#">two</a></li>
  <li class="item"><a href="#">three</a></li>
  <li class="item"><a href="#">four</a></li>
</ul>

这是一个建议清单。

当#field处于焦点时，按向上箭头或向下箭头，我希望能够选择列表中的项目。

那么如何将焦点带到列表中的正确项目？我试过像

这样的东西

if (e.keyCode == 40){  //40 for arrow down
     $('.item').first().focus();
}

但它不起作用。

Answer 1

我认为focus或li没有a，您必须自己突出显示它们：更改所选项目的背景颜色等。

Answer 2

这样的东西可能在jquery中起作用：

$('.item').focusin(function()
{
   $(this).css('background-color',#highlight_color);
});


$('.item').focusout(function()
{
   $(this).css('background-color',#original_color);
});