Javascript 通过li导航的箭头键（无jquery）

我正试图找到一种方法来创建一个没有第三方依赖的极其基本的自动完成。到目前为止，我已经用一个ajax调用填充了一个结果列表，并且通过每个li上的鼠标单击事件，脚本按照预期完成了字段。
我需要实现的是一个基于纯js的上/下/回车键导航系统，经过数小时的搜索后我放弃了。非常完美地解释了我的情况，区别在于它确实需要jQuery

我不想在这里粘贴任何我自己的代码，因为最终的目的是学习这个过程，但是由于我链接到了JSFIDLE，所以我需要这样做，所以这里是FIDLE

fiddle HTML：

<div id="MainMenu">
    <ul>
        <li class="active"><a href="#">PATIENT TEST</a></li>
        <li><a href="#">QC TEST</a></li>
        <li><a href="#">REVIEW RESULTS</a></li>
        <li><a href="#">OTHER</a></li>
    </ul>
</div>

<a href="#" id="btnUp">Up</a>
<a href="#" id="btnDown">Down</a>

---

非常感谢所有愿意为我指出正确方向的人。

这比我预期的要简单，我已经想出了下面的代码，它显然做得很好

需要考虑的事项包括：

• 必须在每个元素上指定HTML属性“tabindex”，才能应用.focus（）
• 要想有一种ENTER->submit的感觉，您必须在li中定位一个link元素（尽管如此，我还是通过这里没有包含的onclick事件来实现这一点）
• 这是一个非常简单的列表结构，到目前为止，我还没有用嵌套的下拉菜单测试它
• 注意：这很可能不适用于复制/粘贴情况，但据我所知，这种方法在程序上是通用的，可以帮助您开始开发更复杂的解决方案

这是基本的HTML：

<input type="text" name="main_input" id="input" />
<ul id="list">
 <li class="listElement"><a href="#" tabindex="1">li content</a></li>
 <li class="listElement"><a href="#" tabindex="1">li content</a></li>
 <li class="listElement"><a href="#" tabindex="1">li content</a></li>
</ul>

这是JS函数，在填充并显示上面的列表时触发：

    function scrollList() {
      var list = document.getElementById('list'); // targets the <ul>
      var first = list.firstChild; // targets the first <li>
      var maininput = document.getElementById('input');  // targets the input, which triggers the functions populating the list
      document.onkeydown = function(e) { // listen to keyboard events
        switch (e.keyCode) {
          case 38: // if the UP key is pressed
            if (document.activeElement == (maininput || first)) { break; } // stop the script if the focus is on the input or first element
            else { document.activeElement.parentNode.previousSibling.firstChild.focus(); } // select the element before the current, and focus it
            break;
          case 40: // if the DOWN key is pressed
            if (document.activeElement == maininput) { first.firstChild.focus(); } // if the currently focused element is the main input --> focus the first <li>
            else { document.activeElement.parentNode.nextSibling.firstChild.focus(); } // target the currently focused element -> <a>, go up a node -> <li>, select the next node, go down a node and focus it
          break;
        }
      }
    }

函数滚动列表（）{
var list=document.getElementById（'list'）；//以

var first=list.firstChild；//以第一个

var maininput=document.getElementById（'input'）；//以输入为目标，触发填充列表的函数
document.onkeydown=函数（e）{//侦听键盘事件
开关（如钥匙代码）{
案例38://如果按下向上键
如果（document.activeElement==（maininput | | first））{break；}//如果焦点在输入或第一个元素上，则停止脚本
else{document.activeElement.parentNode.previousSibling.firstChild.focus（）；}//选择当前元素之前的元素，并将其聚焦
打破
案例40://如果按下向下键
if（document.activeElement==mainport）{first.firstChild.focus（）；}//如果当前聚焦的元素是主输入-->聚焦第一个

else{document.activeElement.parentNode.nextSibling.firstChild.focus（）；}//指向当前聚焦的元素->，向上移动一个节点->
，选择下一个节点，向下移动一个节点并聚焦它
打破
}
}
}

为代码的混乱布局提前道歉，我提出的函数有点复杂，为了解释，我已经去掉了大部分

不用说，我期待着对上述解决方案的任何评论，包括错误、改进或已知的兼容性问题。

tabindex=“1”

为什么不直接使用tabindex=“0”？

---

只有当您希望使用默认的导航顺序时，才需要使用大于0的正数。

到目前为止您尝试了什么？使用document.addEventListener（）是一个很好的开始。为了避免node.firstChild返回的#text或#comment节点出现问题，可以使用ParentNode.firstElementChild仅返回第一个元素节点。如果要将其用作引用，请注意event.keyCode已被弃用，而event.key是解决方法（）这是一个很长的时间，所以我不能肯定，但正如我在回答中指出的，这段代码已经被编辑（排序）适合我的原始来源的问题，其中有很多。这可能是一个遗留下来的。。

    function scrollList() {
      var list = document.getElementById('list'); // targets the <ul>
      var first = list.firstChild; // targets the first <li>
      var maininput = document.getElementById('input');  // targets the input, which triggers the functions populating the list
      document.onkeydown = function(e) { // listen to keyboard events
        switch (e.keyCode) {
          case 38: // if the UP key is pressed
            if (document.activeElement == (maininput || first)) { break; } // stop the script if the focus is on the input or first element
            else { document.activeElement.parentNode.previousSibling.firstChild.focus(); } // select the element before the current, and focus it
            break;
          case 40: // if the DOWN key is pressed
            if (document.activeElement == maininput) { first.firstChild.focus(); } // if the currently focused element is the main input --> focus the first <li>
            else { document.activeElement.parentNode.nextSibling.firstChild.focus(); } // target the currently focused element -> <a>, go up a node -> <li>, select the next node, go down a node and focus it
          break;
        }
      }
    }