【App开发】浅谈Layui如何实现input输入和选择

2020-03-23 1767 4 编辑:深圳App开发 来源:互联网

ayui框架区别于那些基于MVVM底层的UI框架,更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器本身。本篇文章给大家介绍一下实现input输入和选择的方法。

Layui实现input输入和选择的方法:

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>

其中input的几个style样式简单说一下。

position:absolute 在这里是让input和select在同一位置。

z-index:2 是为了让input在select上面。

width:80% 是为了不盖住select后面的小三角符号,select还可以点击。

autocomplete="off" 为了不自动填充input框,免得压盖select选项

然后是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选择的值要能赋值给input框,可以就需要form.on('select(hc_select)'来监听select值的变化,选择了之后要把下拉列表给隐藏掉。同时重新渲染一下这个表单,只重新渲染当前的select也是可以的。

然后就是输入到input框里的文字如何去select中去搜索。首先我们通过检查select的dom结构可以发现,他里面的选项都是在dl下的dd标签中,如图。

然后我们获取到dl标签,然后通过循环的方式挨个去匹配dd中的选项与我们输入的文本是否存在关系。通过indexOf就行。如果不相似,则直接隐藏掉,然后这里为什么要定义一个j呢?

深圳App开发.png

是因为如果都不匹配的话,下面还是会出来一个空的dl标签,页面显示就是一个空的小列表,有点影响美观,所以如果你输入的文本和下拉列表中的选项都没关系的话,直接把dl给隐藏了。这里我是判断不相似的个数如果和dl.length 相等的话,就说明你输入的文本和select的选项没一个相似的,然后就可以把dl隐藏了。

本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联
我们猜你喜欢
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

2
5