Javascript 带有悬停和上下键选择的下拉菜单-冲突代码

在stackoverflow用户的帮助下，我创建了一个下拉菜单 来自学校

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

发生的情况取决于我在javascript工作表中放置代码的位置，它要么根本不起作用，要么当按下向下键时，它会自动跳回顶部选择。如果我按住向下键，它会快速过滤所有选择，直到到达底部，然后再次弹回到顶部选择

通过在每个向上键和向下键之间实现警报，结果有效。因此，有些东西是相互矛盾的

有人知道如何消除冲突吗？还是能够克服这一点

我对jquery不感兴趣，欢迎提供任何帮助或进一步的链接

 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");
}