• Layui 实现input 输入和选择


     1  <div class="layui-col-md4">
     2                 <label class="layui-form-label">移交单位<span style="color:red">*</span></label>
     3                 <div class="layui-input-block">
     4                     <input type="text" name="HandoverCompany" id="HandoverCompany" class="layui-input" style="position:absolute;z-index:2;80%;" lay-verify="required" value="111" onkeyup="search()" autocomplete="off">
     5                     <select type="text" id="hc_select" lay-filter="hc_select" autocomplete="off" placeholder="移交单位全称" lay-verify="required" class="layui-select" lay-search>
     6                         <option value="111">111</option>
     7                         <option value="222">222</option>
     8                         <option value="333">333</option>
     9                         <option value="444">444</option>
    10                         <option value="555">555</option>
    11                     </select>
    12                 </div>
    13             </div>
    • 其中input的几个style样式简单说一下。

    position:absolute 在这里是让input和select在同一位置。
    z-index:2 是为了让input在select上面。
    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呢?是因为如果都不匹配的话,下面还是会出来一个空的dl标签,页面显示就是一个空的小列表,有点影响美观,所以如果你输入的文本和下拉列表中的选项都没关系的话,直接把dl给隐藏了。这里我是判断不相似的个数如果和dl.length 相等的话,就说明你输入的文本和select的选项没一个相似的,然后就可以把dl隐藏了。
  • 相关阅读:
    Repeater 双向排序
    将具有固定格式的text 类型中的数据分离出来的一种方法
    ASP.NET 快速构建应用程序页面主框架
    2分分页处理存储过程通用存储过程
    C#3.0之匿名类型
    常用的js收集
    用CSS实现DataGird滚动而表头不动
    Lucene.Net 创建索引和检索
    Lucene.net 实现全文搜索
    SQL 中操作日期的几个函数
  • 原文地址:https://www.cnblogs.com/qffxj/p/11314027.html
Copyright © 2020-2023  润新知