使用箭头键导航div

Question

我创建了一个自定义搜索栏，我想添加该功能 选择使用箭头上下导航，这看起来像这样。

我希望它可以工作，因此您可以选择导航，当您点击输入时，请输入<a href="forecast.php?location=1">或其他链接。

<div id="header_show_auto_suggest">
  <a href="forecast.php?location=3">
    <li id="header_search_bar_auto_suggest" style="border-top: solid 1px #dddddd;">
      <p id="header_search_bar_text">
        Akranes, Iceland
      </p>
      <img src="images/flags/IS.png" id="header_search_bar_img" width="28px" height="28px">
    </li>
  </a>
  <a href="forecast.php?location=1">
    <li id="header_search_bar_auto_suggest">
      <p id="header_search_bar_text">
        Akureyri, Iceland
      </p>
      <img src="images/flags/IS.png" id="header_search_bar_img" width="28px" height="28px">
    </li>
  </a>
  <a href="forecast.php?location=2">
    <li id="header_search_bar_auto_suggest">
      <p id="header_search_bar_text">
        Reykjavík, Iceland

Answer 1

为什么不尝试将事件侦听器挂钩到搜索输入中，如下所示：

<input type="text" id="search-input">

<script>
    var input = document.getElementById('search-input');

    input.addEventListener('keydown', function onKeyDown(e) {
        var keyCode = e.keyCode;

        if (keyCode === 40) {
            // TODO - up arrow action
        } else if (keyCode === 38) {
            // TODO - down arrow action
        } else if (keyCode === 13) {
            // TODO - enter action
        }
    }
</script>