上图为完成后的样式
下面是代码：
css
.autocomplete-items {
margin-left:10px;
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
z-index: 99;
left: 0;
right: 0;
display:none;
}
.autocomplete-items div {
padding: 10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
/*when hovering an item:*/
background-color: #e9e9e9;
}
.autocomplete-active {
/*when navigating through the items using the arrow keys:*/
background-color: DodgerBlue !important;
color: #ffffff;
}
html:
<td>姓名</td>
<td>
<input name="realname" lay-verify="required" οninput="realNameChange(value)"; placeholder="姓名" autocomplete="off" class="layui-input">
<div id="realname-list" class="autocomplete-items layui-anim layui-anim-up"></div>
<input name="user.id" type="hidden">
</td>
js
$("#realname-list").width($("input[name='realname']")[0].clientWidth);
$("#realname-list").css("display", "block")
$("#realname-list").html("");
httpAjaxGet("" + v, false, function(data){
var dd= "";
for(var i = 0;i<data.length;i++){
dd += "<div οnclick='realNameDivClick(\""+ data[i].name +"\", \""+ data[i].id +"\","+ data[i].dateBirth +",\""+ data[i].sex +"\",\"" + data[i].officeName + "\",\"" + data[i].post + "\",\"" + data[i].politicalAppearance + "\")'>" + data[i].name + "</div>";
}
$("#realname-list").html(dd);
// for(var i = 0;i<data.length;i++){
//var d = data[i];
//$("#" + d.id).click(function(){console.log(d);realNameDivClick(d);})
// }
})
