enabling keyboard (arrow up/down) in a list-item
<p>I've my mark up as</p>

<pre><code>&lt;input id="field" type="text" /&gt;
 &lt;ul&gt;
  &lt;li class="item"&gt;&lt;a href="#"&gt;one&lt;/a&gt;&lt;/li&gt;
  &lt;li class="item"&gt;&lt;a href="#"&gt;two&lt;/a&gt;&lt;/li&gt;
  &lt;li class="item"&gt;&lt;a href="#"&gt;three&lt;/a&gt;&lt;/li&gt;
  &lt;li class="item"&gt;&lt;a href="#"&gt;four&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>It's a suggestions list.</p>

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

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

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

<p>But it doesn't work.</p>
