登录  /  注册

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

发布: 2020-01-08 17:35:15
转载
4154人浏览过

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

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

HTML代码:

<div class="<a style='color:#f60; text-decoration:underline;' href="https://www.php.cn/zt/18036.html" target="_blank">layui</a>-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([&#39;form&#39;, &#39;layedit&#39;,&#39;upload&#39;], function () {
            var form = layui.form
   form.on(&#39;select(hc_select)&#39;, 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标签中,如图。

1.jpg

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

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

更多layui知识请关注PHP中文网的layui使用教程栏目。

以上就是Layui实现input输入和选择的方法的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:博客园网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
关于CSS思维导图的课件在哪? 课件
凡人来自于2024-04-16 10:10:18
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号