手写input与select合并

1.style

<style type="text/css">
    
    .searchName{
        position: relative;
    }
    #searchNameTips{
        position: absolute;
        background-color: #FFF;
        top: 38px;
        left: 0;
        width: 100%;
        height: 100px;
        border:1px solid #E6E6E6;
        z-index: 999;
        overflow: auto;
    }
    #searchNameTips div{
        height: 30px;
        line-height: 30px;
        text-indent: 2em;
    }
    #searchNameTips div:hover{
        background-color: #DCDCDC;
    }
</style>

2.html

<div class="layui-form-item">
          <label class="layui-form-label layui-required">项目名称</label>
          <div class="layui-input-block">
              <input type="text" name="form[obj_name]" lay-verType = "tips" required lay-verify="required" lay-reqtext = "必填项，岂能为空？" placeholder="请输入项目名称" class="layui-input searchName" id="searchName" value="<?=$this->recruitFind['obj_name']?>">
              <input type = "hidden" name = "form[obj_id]" id="obj_id" value = "<?php if($this->recruitFind['obj_id']){echo $this->recruitFind['obj_id'];}else{echo 0;}?>">

              <div id="searchNameTips" style="display: none;">
<?php foreach ($this->itemInfo as $k => $v) { ?>
                      <div class = "<?= $v['id'] ?>"><?= $v['name']?></div>
<?php } ?>

              </div>

          </div>

      </div>

3.js

 $(function(){
            $("#searchName").on('input',function(){
                if($('#searchName').val()){
                    $("#searchNameTips").hide();
                }else{
                    $("#searchNameTips").show();

                }
            });
            $("#searchNameTips div").click(function(){
                console.log($(this).attr('class'));
                $("#searchName").val($(this).text());
                $("#obj_id").val($(this).attr('class'));
                $("#searchNameTips").hide();
            });

            $("#searchName").focus(function(){
                $("#searchNameTips").show();

            });
            // $("#searchName").blur(function(){
            //     $("#searchNameTips").hide();
            // });


        });