使用箭头键导航div

I created a custom made search bar, and I would like to add the ability to select navigation using your arrows to go up and down, this looks like this.

I would like it to work so you can select a navigation and when you hit enter you enter <a href="forecast.php?location=1"> or some other link.

<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

</div>

Why don't you try to hook event listeners to your search input like so:

<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>