Layui implémente des méthodes de saisie et de sélection

Méthode de Layui pour implémenter la saisie et la sélection des entrées :

Code HTML :

<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>

Quelques styles de saisie sont brièvement mentionnés. .

position:absolute met ici l'entrée et la sélection à la même position.

z-index:2 consiste à mettre l'entrée sur la sélection.

width:80% ne doit pas couvrir le petit symbole triangulaire derrière la sélection, et la sélection peut toujours être cliquée.

autocomplete="off" Afin de ne pas remplir automatiquement la zone de saisie, afin de ne pas couvrir l'option de sélection

puis le code JS.

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

Laissez-moi vous expliquer brièvement mon idée. Tout d'abord, la valeur sélectionnée par select doit être affectée à la zone de saisie. Vous avez besoin de form.on('select(hc_select)' pour surveiller le changement de la valeur sélectionnée. Après avoir sélectionné, vous devez Il est également possible de masquer la liste déroulante et de restituer le formulaire en même temps

Alors comment rechercher le texte saisi dans la zone de saisie ? dans la structure dom de select, les options qu'il contient sont toutes dans la balise dd sous dl, comme le montre la figure

Ensuite, nous obtenons la balise dl puis boucle. à travers lui. La méthode consiste à faire correspondre les options de dd une par une avec le texte que nous saisissons. Si elles ne sont pas similaires, masquez-les directement. Alors pourquoi devez-vous définir un j ici car s'il n'y en a pas. relation ? Si cela correspond, une balise dl vide apparaîtra toujours en dessous et l'affichage de la page sera une petite liste vide, ce qui affecte un peu l'apparence, donc si le texte que vous saisissez et les options de la liste déroulante ne le font pas importe, cachez simplement le dl ici. Je juge que si le nombre d'éléments différents est égal à dl.length, cela signifie qu'aucun du texte que vous saisissez n'est similaire à l'option sélectionnée, et vous pouvez alors masquer dl

.

Veuillez en savoir plus sur layui. Faites attention à la colonne

Tutoriel d'utilisation de layui

sur le site Web PHP chinois.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!