Input输入框搜索并在输入框下方显示搜索列表

需求：Input输入框搜索并在输入框下方显示搜索列表，点击选择某条目，鼠标悬浮某条目背景颜色改变，并且点击列表外列表隐藏。

原因：

1，采用比较新的jquery运用其autocomplate方法即可。Jquery与现有版本冲突，此方法不适用。
2，autoComplate.js插件，测试后不成功
3，采用vue和select2方法。跟同页面原有代码风格不一致，不太协调。
自己写个类似的功能js方法
Input输入框搜索并在输入框下方显示搜索列表，鼠标悬浮某条目背景颜色改变，点击可选择某条目，并且点击列表外列表可隐藏。
所以自己简单实现下功能

Html部分

<tr><td>客户：<input type="text" id="customer" name="customer" class="customer" style="width:250px" placeholder="请输入客户名称"/><input type="hidden" name="customerId" id="customerId">

   <div id="customerDiv" ></div></td></tr>

   

Js部分

//输入客户名称搜索

$(function(){

 $("#customer").live("keydown",function(event){

  customerSearch(event);//keyDownSearch

  });

});

 

 

//搜索客户名称方法

function customerSearch(e){

var theEvent = e || window.event;  

    var key = theEvent.keyCode || theEvent.which || theEvent.charCode;  

    if (key == 13) {  

    var param=$("#customer").val().trim();

    if(param!=null&¶m!=""){

        ajaxPost(url,param,function(data){

         if(data.code==200){

             var customerList=data.data;

             var chtml="<table>"

             for(var i=0;i<customerList.length;i++){

             var customer=customerList[i];

             console.log(customer);

         chtml+="<tr onmouseover='mOver(this);' onmouseout='mOut(this);'                         onclick=choseCustomer("+customer.id+",'"+customer.name+"'); ><td>"+customer.name+"</td>        </tr>";

     }

     chtml+="</table>"

     console.log(chtml);

     $("#customerDiv").html(chtml);

    // $("#customerDiv").show();

     $("#customerDiv").css({backgroundColor:'#A7D5ED',position:"absolute",top:$("#customer").position().top +22 ,left:$("#customer").position().left,overflow:'scroll',overflowX:'hidden',height:200,width:250}).show();

     hidediv("customerDiv");

     }

 });

}

    }

}

function mOver(obj){

    obj.style.background="#A9A9A9";

}

function mOut(obj){

    obj.style.background="";

}

function choseCustomer(customerId,customerName){

    $("#customerId").val(customerId);

    $("#customer").val(customerName);

    $("#customerDiv").hide();

}

function hidediv(name){

 var myDiv = document.getElementById(name);

    document.addEventListener("click",function(){

        myDiv.style.display="none";

    });

    myDiv.addEventListener("click",function(event){

        event=event||window.event;

        event.stopPropagation();

    });

}