Arrow Navigation in Div [closed]

I'm doing an autocomplete in jquery and ajax , the results obtained by ajax I'm putting in <div> .

I would like the user to be able to navigate with the arrow by the results, leaving <input> and navigated by <div> .

$.ajax({
  url: "PartServlet.class.php?action=getArray&keys[stats]=Utilizavel&keys[name]="+word
}).done(function(list){
  if(list.result === 1){
    var buffer = "";
    $.each(list.obj, function(index,part){
      part = $.parseJSON(part);
      buffer += "<div class='partItem' data-id='"+part.id+"' data-name='"+part.name+"'>"+part.id+"-"+part.name+"</div>";
    });
    $("#autocomplete").html(buffer).css("display", "block");
  }
  ajaxRunning = false; 
}).fail(function (data){
  ajaxRunning = false;
  $("#autocomplete").html("").css("display","none");
});

<div>
  <input id="search" name="search" type="text" />
  <div id="autocomplete">
  </div>
</div>