layui select 可输入可选择可模糊搜索

结合网上搜到的一些解决方法 使用input覆盖select下拉框 保留下拉icon 并将下拉选中的数据赋值给input

• HTML

<div class="layui-inline">
         <label class="layui-form-label">计量单位<span class="x-red">*</span></label>
                 <div class="layui-input-block unitSelect" style="width: 100px;">
                        <select name="unit" id="unit" lay-filter="unit">
                            <option value=""></option>
                        </select>
                        <input type="text" name="unit" id="unitInput" autocomplete="off" class="layui-input"
                            lay-verify="required" placeholder="单位">
              </div>
  </div>

• CSS 调整样式

#unitInput {
      position: absolute;
      top: 1px;
      left: 1px;
      width: 76%;
      border: none;
      height: 28px;
}

• JS

// select 搜索输入  
            okUtils.ajax('请求地址xxxx', 'get', null, false).done(function (res) {
                if (res.code == 0) {
                    $.each(res.material, function (i, v) {
                        $('#unit').append(new Option(v.unit));
                    });
                    form.render('select');
                }
            });
            $('#unitInput').on('input propertychange', function () {
                let val = $(this).val();
                $('.layui-form-select').addClass('layui-form-selected');
                $('.layui-select-tips').addClass('layui-this');
                let len = $("#unit").next().find("dl").children();
                for (let i = 0; i < len.length; i++) {
                    if (len[i].innerHTML.indexOf(val) == -1) {
                        len[i].classList.add("layui-hide");
                    } else {
                        len[i].classList.remove("layui-hide");
                    }
                };
                if ($('.unitSelect dl .layui-hide').length >= len.length) {
                    $('.unitSelect dl').append('<p class="layui-select-none">无匹配项</p>');
                } else {
                    $('.unitSelect dl').remove('p')
                }

            });
            $('#unitInput').blur(function () {
                $('.layui-form-select').removeClass('layui-form-selected');
                $('.layui-select-tips').removeClass('layui-this');
            });
            form.on('select(unit)', function (obj) {
                $('#unitInput').val(obj.value);
            });
            // end