Layui は入力の入力と選択メソッドを実装します

Layui による入力と選択の実装方法:

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>

いくつかの入力スタイルについて簡単に説明します。

position:absolute ここで、input と select を同じ位置に置くことです。

z-index:2 は、入力を選択に置くことです。

width:80% は、選択の背後にある小さな三角形のシンボルをカバーしないため、選択は引き続きクリックできます。

autocomplete="off" 選択オプション

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

私の考えを簡単に説明します。まず、select で選択した値を入力ボックスに割り当てる必要があります。その場合、値の変化を監視するには form.on('select(hc_select)' が必要です。値を選択します。選択した後、ドロップダウン リストを非表示にする必要があります。同時に、フォームを再レンダリングします。現在の選択のみを再レンダリングすることも可能です。

次に、入力されたテキストselect の dom 構造で、その中のオプションがすべて dl 配下の dd タグ内にあることが図のように確認できます。

次に、dl タグを取得し、ループします。1 つずつ照合する方法は、dd のオプションと入力したテキストの間に関係があるかどうかです。ただ、indexOf を使用します。類似していない場合、直接非表示になります。では、なぜここで j を定義する必要があるのでしょうか?

理由は、関係がない場合でも、一致する場合でも、空の dl タグが下に表示されるためです。は空の小さなリストで、見た目に少し影響するので、入力するテキストとドロップダウンリストのオプションが重要でない場合は、dl を直接非表示にしてください。ここでは、異なる項目の数が等しいかどうかを判断しますdl.length に変更すると、入力したテキストが選択したオプションに似ていないことを意味し、dl を非表示にすることができます。

layui の詳細については、

layui の使用方法チュートリアルを参照してください。 PHP 中国語 Web サイトの

コラム。

以上がLayui は入力の入力と選択メソッドを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。