How to select next/previous anchor tags in a DIV with down/up arrow keys?
<p>I have an <code>&lt;input id="#locKeySearch"&gt;</code> and a <code>&lt;div id="#locDropDown"&gt;</code>. When I type in my <code>input</code> field I call a dynamic drop down through AJAX in the <code>div</code>.</p>

<p>Now I would like to have more functionality from the arrow keys <kbd>↓</kbd>/<kbd>↑</kbd>. I want to select my <code>&lt;a&gt;</code> tags and when they are selected their backgrounds change and on pressing <kbd>Enter</kbd>, the browser navigates to the appropriate location.</p>

<p>Can anyone help me on this please?</p>

<p>CSS:</p>

<pre><code>div {width:300px;}
a{display:block;}
a:hover{background:#ccc;}
</code></pre>

<p>JavaScript:</p>

<pre><code>$(document).ready(function() {
  $('#locKeySearch').keydown(function(e)
    {&lt;br&gt;
      var alinks = $('#locDropDown').find('a');
      if(alinks.length &gt; 0)
      {
        alinks.each(function(){

          if (e.keyCode === 40)//Down Arrow
          {
              e.preventDefault();
              var current = alinks.index(),
              next = $(this).next();
              this.blur();
              setTimeout(function() { next.focus().select(); }, 50);
          }
        });
      }
    });
  });
</code></pre>

<p>HTML:</p>

<pre><code>&lt;form&gt;
    &lt;input type="text" name="locKeySearch" id="locKeySearch" value="" /&gt;
&lt;/form&gt;
&lt;div id="locDropDown"&gt;
    &lt;a href="1"&gt;1&lt;/a&gt;
    &lt;a href="2"&gt;2&lt;/a&gt;
    &lt;a href="3"&gt;3&lt;/a&gt;
    &lt;a href="4"&gt;4&lt;/a&gt;
    &lt;a href="5"&gt;5&lt;/a&gt;
    &lt;a href="6"&gt;6&lt;/a&gt;
    &lt;a href="7"&gt;7&lt;/a&gt;
    &lt;a href="8"&gt;8&lt;/a&gt;
    &lt;a href="9"&gt;9&lt;/a&gt;
    &lt;a href="10"&gt;10&lt;/a&gt;
&lt;/div&gt;
</code></pre>
