Drop down menu with hover and up and down key selections - conflict code

Question

I have created a drop down menu with the help from stackoverflow users and this LINK HERE from w3schools.

<script>
function showHint(str)
{
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
   }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
   {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","gethint.php?q="+str,true);
xmlhttp.send();
}
</script>

However, I am having problems implementing this code to include a function that will pick up on the user selecting without the use of a mouse (i.e key up and key down). I have tried to implement the following example from another thread on stackoverflow: LINK HERE and a FIDDLE HERE but to no avail.

 var active = document.querySelector(".hover") ||         document.querySelector(".dropdownItemContainer li");

document.addEventListener("keydown",handler);
document.addEventListener("mouseover",handler);

function handler(e){
console.log(e.which);
    active.classList.remove("hover");
if (e.which == 40){
    active = active.nextElementSibling || active;
}else if (e.which == 38){      
    active = active.previousElementSibling || active;
}else{
    active = e.target;
}
    active.classList.add("hover");
}

What happens is depending on where I place my code in my javascript sheet, it either does not work at all, or when a down key is pressed, it automatically jumps back up to the top selection. If I hold down the down key, it rapidly filters through all selections until it hits the bottom, then flicks back again to the top selection.

By implementing an alert in between each up key and down key, the result works. Therefore something is conflicting.

Does anyone have any clues on how to remove this conflict? Or are able to overcome this?

I am not interested in jquery, and any help or further links that may be of help will be welcomed.