title: Jquery arrow key navigation
body: <p>I have these textfield and dropdown menu for a Facebook like autosuggestion:</p>
  
  <pre><code>&lt;input type="text" id="search" name="search_fld"/&gt;
  
  &lt;div id="display"&gt;
  &lt;div class="display_box"&gt;Luca&lt;/div&gt;
  &lt;div class="display_box"&gt;David&lt;/div&gt;
  &lt;div class="display_box"&gt;Mark&lt;/div&gt;
  &lt;div class="display_box"&gt;...&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>.display_box:hover
  {
    background:#3b5998;
    color:#FFFFFF;
  }
  </code></pre>
  
  <p>How can I achieve to pass the 'hover' state  with <strong>down arrow key</strong> from my input "search_fld" to the first 'display_box' and so on for all the "display" divs?</p>
  
  <p>Here is a <a href="http://jsfiddle.net/MKZSE/" rel="nofollow noreferrer">link the jsfiddle code</a>.</p>