Layui implementiert Eingabe-Eingabe- und Auswahlmethoden

Layuis Methode zur Implementierung der Eingabeeingabe und -auswahl:

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>

Einige der Eingabestile werden kurz erwähnt. .

position:absolute Hier werden Eingabe und Auswahl an derselben Position platziert.

z-index:2 dient dazu, die Eingabe auf die Auswahl zu setzen.

width:80% soll das kleine Dreieckssymbol hinter der Auswahl nicht abdecken, und die Auswahl kann weiterhin angeklickt werden.

autocomplete="off" Um das Eingabefeld nicht automatisch auszufüllen, um die Auswahloption

und dann den JS-Code nicht zu überdecken.

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" });
                    }
                }
                
            }
        });

Lassen Sie mich kurz meine Idee erläutern. Zuerst muss der von select ausgewählte Wert dem Eingabefeld zugewiesen werden. Sie benötigen form.on('select(hc_select)', um die Änderung des ausgewählten Werts zu überwachen. Nach der Auswahl müssen Sie die Dropdown-Liste auch ausblenden und gleichzeitig das Formular neu rendern. Wie kann dann der im Eingabefeld eingegebene Text gefunden werden? Wählen Sie in der Dom-Struktur aus, dass sich die darin enthaltenen Optionen alle im dd-Tag unter dl befinden, wie in der Abbildung gezeigt. Dann erhalten wir das dl-Tag und dann eine Schleife Die Methode besteht darin, die Optionen in dd einzeln mit dem von uns eingegebenen Text abzugleichen. Wenn sie nicht ähnlich sind, müssen Sie sie dann direkt ausblenden Beziehung? Wenn es übereinstimmt, wird unten immer noch ein leeres DL-Tag angezeigt und die Seitenanzeige ist eine leere kleine Liste, was sich ein wenig auf das Erscheinungsbild auswirkt, wenn also der von Ihnen eingegebene Text und die Optionen in der Dropdown-Liste dies tun Egal, verstecken Sie einfach den dl. Wenn die Anzahl der unterschiedlichen Elemente gleich dl.length ist, bedeutet dies, dass keiner der von Ihnen eingegebenen Texte mit der ausgewählten Option übereinstimmt, und dann können Sie dl ausblenden >

Bitte beachten Sie die Spalte

Layui-Verwendungsanleitung

auf der chinesischen PHP-Website.

Das obige ist der detaillierte Inhalt vonLayui implementiert Eingabe-Eingabe- und Auswahlmethoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!