使用箭头键导航 div答案

【问题标题】：Use arrows key to navigate divs使用箭头键导航 div
【发布时间】：2015-05-06 20:09:32
【问题描述】：

我创建了一个定制的搜索栏，我想添加以下功能使用箭头上下选择导航，如下所示。

我希望它能够正常工作，这样您就可以选择一个导航，然后当您按 Enter 键时输入 <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

【问题讨论】：

<li> 只能有 <ul> 或 <ol> 作为父母。另请发布您编写的 javascript 以使其正常工作。
我没有做任何javascript代码
那么请按照您的期望执行并发布不起作用的部分。

标签： javascript php jquery html css

【解决方案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>

【讨论】：