下拉框聯想輸入框

上圖爲完成後的樣式

下面是代碼：

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" oninput="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 onclick='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);})
              
//           }
        
      })