enabling keyboard (arrow up/down) in a list-item

I've my mark up as

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

It's a suggestions list.

When the #field is in focus, on pressing arrow up or arrow down, I want to be able to select the items in the list.

So how do I bring the focus to the right item in the list?? I tried something like

if (e.keyCode == 40){  //40 for arrow d开发者_如何学Cown
     $('.item').first().focus();
}

But it doesn't work.

---

I think there is no focus for li or a, you have to highlight them by yourself: change the background color of the selected item etc.

---

something like this might work in jquery:

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


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