搜索框输入自动提示功能实现

原项目是基于layui的工程，实现功能：搜索框输入数据，根据后端返回的数据匹配自动提示
效果如下图

html部分核心代码

 <style>
.content input[type=text]{
        width: 150px;
        height: 32px;
        outline: none;
        padding-left: 8px;
    }
    .list{
        z-index: 2;
        position: absolute;
        background-color: #ffffff;
    }
    .list ul{
        width:120px ;
        clear: both;
        border: 1px solid #A9A9A9;
        display: none;
        list-style: none;
		margin:0px;
    }
    .list ul li{
        padding-left: 8px;
    }
    .list ul li:hover{
        background-color: #CCC;
    }
</style>
<div>
	<div class="layui-input-inline content" style="width: 150px; margin-right: 10px;">
			<input type="text" id="content" class="layui-input table-toolbar-ele" placeholder="请输入搜索内容" autocomplete="off">
	</div>
	<div class="list"><ul id="ul"></ul></div>
</div>

JS部分核心代码

var dataList=["001","002","003"];		//此处应为处理好的提示数据数组，我仅举例记录

//输入自助机编号搜索提示
var ul=document.getElementById("ul");
var content_div=document.getElementById("content");

//当用户离开输入字段时对其进行验证：
content_div.onblur = function (){
     content_div.style.borderColor = "initial";
     ul.style.display = "none";
 }
//当元素获得用户输入时运行的脚本
content_div.oninput = function(){
    selectKeys();
}
content_div.onpropertychange = function(){
    selectKeys();
}
function selectKeys() {
           //var value=$("#content").val()		//Jquery写法
           var value=document.getElementById("content").value;
           if(value != ""){
               ul.innerHTML = "";
               for (var i=0;i<dataList.length;i++) {
                   if(dataList[i].indexOf(value.toUpperCase())==0){
                       var li=document.createElement("li");
                       li.innerHTML=dataList[i];
                       li.onmousedown=function (){     //为li动态添加事件,(此处使用onmousedown而非onclick，主要解决onblur与onclick事件时的冲突问题)
                           //$("#content").val(this.innerHTML);	  //Jquery写法
                           document.getElementById("content").value=this.innerHTML;
                       }
                       ul.appendChild(li);
                       ul.style.display="block";
                   }
               }
           }else{
               ul.style.display="none";
           }
   }