向上/向下导航通过ajax结果列表进入选择

Question

目前我有一个有效的搜索输入，如果用户开始输入结果，则自动填充到ul但是我仍然无法浏览我的列表。什么是最好的去做？甚至可以使用ul，还是需要将其切换为select？这是Codepen以及

HTML

<!-- Search Begin -->
<div class="container search">
  <div class="col-md-8 col-md-offset-2">
    <div class="form-horizontal">
      <div class="form-group">
        <div class="fa fa-search pull-left"></div>
        <div class="col-md-9 col-sm-9">
          <input autocomplete="off" class="form-control SearchInput" name="search" placeholder="Have your search terms translated to Chinese." value="" type="text">
          <div class="updateResults topSearch"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Search END -->

JS

$('.SearchInput').keyup(function() { //when key is pressed in search bar
  var searchTerm = $(this).val(); //val of search bar
  var myExp = new RegExp("^" + searchTerm, "i"); //regular experation

  var data = [{
    "url": "/category/goggles-50007006",
    "title": "Sleep Masks"
    },
    {
    "url": "/category/head-protection-products-50023012",
    "title": "Sanitary Headwear"
    },
    {
    "url": "/category/goggle-50012517",
    "title": "Safety Goggles"
    },]

    var output = "<ul>";
    $.each(data, function(key, val){
      if(val.title.search(myExp) != -1){//search for the data in the json file
        output += '<li>';
        output += '<a href="'+val.url+'">' +val.title+ '</a>';
        output += '</li>';
      }
    });//end each
    output += "</ul>";
    $('.updateResults').html(output);//output result to the update div

  if ( !$(this).val() ) {
    $('.updateResults').hide()
  } else if ( $(this).val() ) {
    $('.updateResults').show()
  }
});