Layui implements input input and selection methods

Layui’s method of implementing input input and selection:

HTML code:

<div class="layui-col-md4">
                <label class="layui-form-label">移交单位<span style="color:red">*</span></label>
                <div class="layui-input-block">
                    <input type="text" name="HandoverCompany" id="HandoverCompany" class="layui-input" style="position:absolute;z-index:2;width:80%;" lay-verify="required" value="111" onkeyup="search()" autocomplete="off">
                    <select type="text" id="hc_select" lay-filter="hc_select" autocomplete="off" placeholder="移交单位全称" lay-verify="required" class="layui-select" lay-search>
                        <option value="111">111</option>
                        <option value="222">222</option>
                        <option value="333">333</option>
                        <option value="444">444</option>
                        <option value="555">555</option>
                    </select>
                </div>
            </div>

Let’s briefly talk about several styles of input .

position:absolute here is to put input and select at the same position.

z-index:2 is to put the input on the select.

width:80% is to not cover the small triangle symbol behind the select, and the select can still be clicked.

autocomplete="off" In order not to automatically fill in the input box, so as not to cover the select option

and then the JS code.

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

            window.search = 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" });
                    }
                }
                
            }
        });

Let me briefly explain my idea. First, the value selected by select must be assigned to the input box. If so, you need form.on('select(hc_select)' to monitor the change of the select value. After selecting, you need to Hide the drop-down list. At the same time, re-render the form. It is also possible to re-render only the current select.

Then the text entered into the input box is searched in the select. First, we check It can be found in the dom structure of select that the options in it are all in the dd tag under dl, as shown in the figure.

Then we get the dl tag, and then loop through The way to match one by one is whether there is a relationship between the options in dd and the text we input. Just use indexOf. If they are not similar, they will be hidden directly. Then why do we need to define a j here?

Because if there is no relationship If there is a match, an empty dl tag will still appear below. The page display is an empty small list, which affects the appearance a bit, so if the text you enter and the options in the drop-down list do not matter, just hide the dl directly. Here I judge that if the number of dissimilar items is equal to dl.length, it means that none of the text you input is similar to the selected option, and then dl can be hidden.

For more layui knowledge, please Pay attention to the layui usage tutorial column on the PHP Chinese website.

The above is the detailed content of Layui implements input input and selection methods. For more information, please follow other related articles on the PHP Chinese website!