如何使用上/下箭头键在DIV中选择下一个/上一个锚标签？

Question

我有一个<input id="#locKeySearch">和一个<div id="#locDropDown"> 。 在input字段中键入内容时，我会通过div AJAX调用动态下拉菜单。

现在，我想从箭头键↓ / ↑获得更多功能。 我想选择我的<a>标记，并且选择它们的背景会发生变化，并且在按Enter时 ，浏览器会导航到适当的位置。

有人可以帮我吗？

CSS：

div {width:300px;}
a{display:block;}
a:hover{background:#ccc;}

JavaScript的：

$(document).ready(function() {
  $('#locKeySearch').keydown(function(e)
    {<br>
      var alinks = $('#locDropDown').find('a');
      if(alinks.length > 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);
          }
        });
      }
    });
  });

HTML：

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

Answer 1

我已经解决了上面的查询。 下面是答案

function keyEvents()
{
    var keyindex,alinks;
    keyindex = -1;
    // Key Events
    $('#locKeySearch').keydown(function(e){
        alinks = $('#locDropDown').find('a');
        if(alinks.length == 0)
        {
            keyindex = -1;
        }
        if(e.keyCode == 40)
        {
            e.preventDefault();
            if(alinks.length > 0 && keyindex == -1)
            {
                keyindex = 0;
                $('#locDropDown').find('a')[keyindex++].focus();
            }
        }
    });

    $('#locDropDown').keydown(function(e)
    {
        alinks = $('#locDropDown').find('a');
        if(e.keyCode == 40)
        {
            e.preventDefault();     
            if(keyindex == -1)
            {
                keyindex = 1;
            }
            if(alinks.length > 0 && keyindex < alinks.length)
            {
                $('#locDropDown').find('a')[keyindex++].focus();
            }
        }
        if(e.keyCode == 38)
        {
            e.preventDefault();
            if(keyindex == alinks.length)
            {
                keyindex = keyindex-2;
            }

            if(alinks.length > 0 && keyindex < alinks.length && keyindex >=0)
            {
                $('#locDropDown').find('a')[keyindex--].focus();
            }
        }
    });

}