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 여기서는 동일한 위치에 입력과 선택을 넣는 것입니다.

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

간단히 제 생각을 설명하겠습니다. 먼저 선택한 값을 입력 상자에 할당해야 합니다. 그렇다면 선택 값의 변화를 모니터링하려면 form.on('select(hc_select)'이 필요합니다. 선택 후, 입력 상자에 드롭다운 목록을 할당해야 합니다. 동시에 양식을 다시 렌더링하고 현재 선택 항목만 다시 렌더링할 수도 있습니다. 먼저 select의 dom 구조를 확인하여 찾을 수 있습니다. 그림에 표시된 것처럼 내부 옵션은 모두 dl 아래의 dd 태그에 있습니다. 그런 다음 루프를 사용하여 일치시킵니다. dd의 옵션과 우리가 입력한 텍스트 사이에 관계가 있는지 여부. 유사하지 않으면 그냥 숨기세요. 왜 여기서 j를 정의해야 합니까? 일치하는 항목이 없으면 빈 dl입니다. 태그는 여전히 아래에 표시되며 페이지에는 빈 작은 목록이 표시됩니다. 이는 모양에 약간 영향을 미치므로 입력한 텍스트가 드롭다운 목록의 옵션과 관련이 없으면 여기에서 dl을 숨기십시오. 서로 다른 항목의 개수가 dl.length와 같다면 입력한 텍스트에 유사한 옵션을 선택할 수 없으며 dl을 숨길 수 있다는 의미입니다.

더 많은 레이의 지식을 보려면

에 주목하세요. PHP 중국어 웹사이트의layui 사용법 튜토리얼

칼럼.

위 내용은 Layui는 입력 입력 및 선택 방법을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!