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

我有一个和一个。当我输入输入字段时，我通过div中的AJAX调用一个动态下拉列表

现在我想从箭头键获得更多功能↓/↑. 我想选择我的标记，当它们被选中时，它们的背景会改变，按Enter键时，浏览器会导航到相应的位置

有人能帮我吗

CSS:

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:

---

我已经解决了上述问题。下面是答案

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();
            }
        }
    });

}

---

我已经解决了上述问题。下面是答案

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();
            }
        }
    });

}

---

随机匿名和未注释的否决票对这个社区不利。我看不出这个问题有什么不对，这意味着我真的怀疑一个比我更新的用户会不会出现。这个问题需要什么？@KRyan这个问题的原始版本并不容易阅读：-但我同意不加评论的否决票是不公平的-否则任何人怎么能知道错在哪里。啊，多亏了锡人。随机匿名和未加注释的否决票对这个社区不利。我看不出这个问题有什么不对，这意味着我真的怀疑一个比我更新的用户会不会出现。这个问题需要什么？@KRyan这个问题的原始版本不太容易理解：-但我同意不加评论的否决票是不公平的-否则谁又能知道什么是错的。啊，多亏了锡人。你的代码有缺陷…：下班后我会尝试更正它们：您的代码有缺陷…：我将在下班后尝试纠正这些问题：

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();
            }
        }
    });

}