layui 可输入的下拉框

layui 可输入的下拉框

相当完美

转载至 https://www.jianshu.com/p/5e526c9db035

                移交单位*
                

                    
                    
                        111
                        222
                        333
                        444
                        555
                    
                
            

position:absolute 在这里是让input和select在同一位置。
z-index:2 是为了让input在select上面。
width:80% 是为了不盖住select后面的小三角符号，select还可以点击。
autocomplete=“off” 为了不自动填充input框，免得压盖select选项

layui.use(['form', 'layedit','upload'], function () {
            var form = layui.form
   form.on('select(hc_select)', function (data) {   //选择移交单位 赋值给input框
 				  var select_text = data.elem[data.elem.selectedIndex].text;
                $("#HandoverCompany").val(select_text );
                $("#hc_select").next().find("dl").css({ "display": "none" });
                form.render();
            });

        $('#HandoverCompany').bind('input propertychange', function () {
            var value = $("#HandoverCompany").val();
            $("#hc_select").val(value);
            form.render();
            $("#hc_select").next().find("dl").css({ "display": "block" });
            var dl = $("#hc_select").next().find("dl").children();
            var j = -1;
            for (var i = 0; i < dl.length; i++) {
                if (dl[i].innerHTML.indexOf(value) <= -1) {
                    dl[i].style.display = "none";
                    j++;
                }
                if (j == dl.length-1) {
                    $("#hc_select").next().find("dl").css({ "display": "none" });
                }
            }
            
        }
    });

作者：仙剑奇灵
链接：https://www.jianshu.com/p/5e526c9db035
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。