如何使用箭头键将焦点转移到列表项上，香草JavaScript

我正在创建一个小型toDo应用程序，我希望我的用户能够使用箭头键搜索toDo项目：

我的代码工作正常，但并不像我预期的那样，因为它以某种随机方式跳转列表项，但我不明白为什么会发生这种情况

<div class="col-md-6 align-self-center">
                    <input type="text" class="form-control" id="filter" placeholder="Search Items...">               
                        <ul id="filter-ul">
                        </ul>
                </div>

从我的两个错误中我了解到，这与我的输入字段没有兄弟元素有关，但我用if{}括号中的条件保护自己，或者我教过：

这让我抓狂，因为从逻辑上看，一切都很好，我遗漏了一些明显的东西，可能因为我是JavaScript新手。非常感谢您的帮助。

---

提前谢谢

哪个元素是过滤器列表？您在每个按键过滤器列表上添加

keydown

事件只是我在键入搜索查询时找到的列表项（li）列表关于keydown有什么问题？光标导航的示例：在输入字段中的每个“keydup”上，您为“keydown”添加了新的侦听器，因此“keydown”然后在箭头向上/箭头向下触发x次哪个元素是过滤器列表？您在每个按键过滤器列表上添加

keydown

事件只是我在键入搜索查询时找到的列表项（li）列表关于keydown有什么问题？光标导航的示例：在输入字段中的每个“keydup”上为“keydown”添加新的侦听器，因此“keydown”会在ArrowUp/ArrowDown上触发x次

let filter = document.getElementById("filter");
filter.addEventListener("keyup", navigateThroughList);

function navigateThroughList() {
  let firstItem = filterList.firstElementChild;
  // firstItem.focus();

  document.addEventListener("keydown", function(e) {
    switch (e.key) {
      case "ArrowUp":
        if (document.activeElement == (filter || firstItem)) {
          filterList.lastElementChild.focus();
        } else {
          document.activeElement.previousSibling.focus();
        }
        break;


      case "ArrowDown":
        if (document.activeElement == filter) {
          firstItem.focus();
        } else {
          if(document.activeElement.nextSibling==null){
            firstItem.focus();
          }
          document.activeElement.nextSibling.focus();
        }
        break;
    }
  });
}