layui实现时时动态选择搜索下拉框,时时更新,以及输入法的完整输入

<div class="layui-tab-content" style="position:absolute">
        <div class="layui-tab-item layui-show">
            <form class="layui-form" lay-filter="sale" id="sale">
                <div class="layui-form-item">
                    <label class="layui-form-label">客户</label>
                    <div class="layui-input-block customerA" >
                        <select id="customer" name="customer" lay-filter="customer" lay-verify="required">
                            <option value=""></option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">金额</label>
                    <div class="layui-input-block">
                        <input type="text" lay-verify="required|number" name="money" autocomplete="off"
                               placeholder="请输入金额"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-block">
                        <input type="text" lay-verify="required|phone" name="phone" autocomplete="off"
                               placeholder="请输入手机号"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">商品</label>
                    <div class="layui-input-block">
                        <input type="text" lay-verify="required" name="goods" autocomplete="off" placeholder="请输入商品"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="hidden" value="" name="remark" lay-verify="title" autocomplete="off"
                               placeholder="备注"
                               class="layui-input">
                    </div>
                </div>
                <div style="position:fixed; right:20px; bottom:20px;z-index:99;">
                    <button type="submit" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="demo1">二维码支付
                    </button>
                </div>
            </form>
        </div>
        <div class="layui-tab-item">
            <form class="layui-form" id="servicePay" lay-filter="servicePay">
                <div class="layui-form-item">
                    <label class="layui-form-label ">客户</label>
                    <div class="layui-input-block customerB">
                        <select name="customer" id="customer1" lay-filter="customer1"  lay-verify="required">
                            <option value=""></option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">金额</label>
                    <div class="layui-input-block">
                        <input type="text" name="money" lay-verify="required|number" autocomplete="off"
                               placeholder="请输入金额"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-block">
                        <input type="text" name="phone" lay-verify="required|phone" autocomplete="off"
                               placeholder="请输入手机号"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">服务费类别</label>
                    <div class="layui-input-block" >
                            <input type="text" id="serviceType" name="serviceType" lay-verify="required" autocomplete="off"  placeholder="请选择服务费类别"
                                    class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="hidden" name="remark" lay-verify="title" autocomplete="off" placeholder="备注"
                               value="" class="layui-input">
                    </div>
                </div>
                <div style="position:fixed; right:20px; bottom:20px;z-index:99;">
                    <button type="submit" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="demo1">二维码支付
                    </button>
                </div>
            </form>
        </div>
layui.use(['element', 'layer', 'form'], function () {
        var $ = layui.jquery, layer = layui.layer, form = layui.form;
       //判断汉字是否输完
        $("#customer").next().find('input').removeAttr("readonly");
        $("#customer1").next().find('input').removeAttr("readonly");
        function isSetOver(a) {
            var flag = true;
            $("#"+a).next().find('input').on('compositionstart', function () {
                flag = false;
            });
            $("#"+a).next().find('input').on('compositionend', function () {
                flag = true;
            });
            return flag;
        }
        $("#serviceType").click(function () {
            console.log(1)
            layer.open({
                type: 2
               , id: 'serviceType1'//防止重复弹出
                , area: ['280px', '330px']
                , title: '服务费类别选择'
                , zIndex: 998
                , content: 'serviceType.html'
                , success: function (layero, index) {
                }
                , shade: 0.2 //不显示遮罩
            });
        });
        function myFun() {
            var b = isSetOver("customer");
            var params = $(this).val();
            setTimeout(function () {
                    if (b) {
                        if (params.length >= 2) {
                            $.ajax({
                                type: "post",
                                url: "cloud-letter/customer/get",
                                dataType: 'json',
                                data: {qymc: params},//表单数据
                                async: false,
                                success: function (d) {
                                    var  data=d.data;
                                    if (data.length!=0){
                                        selectCreate("customer",data,params);
                                        $("#customer").next().find('input').removeAttr("readonly");
                                        $("#customer1").next().find('input').removeAttr("readonly");
                                        $("#customer").next().find('input').val(params);
                                        setTimeout(function () {
                                            $("#customer").next().find('input').click();
                                            $("#customer").next().find('input').focus();
                                        },0)
                                    }
                                }
                            });
                        }
                    }
        },0);
        }
        function myFunB() {
            var b = isSetOver("customer1");
            var params = $(this).val();
            setTimeout(function () {
                if (b) {
                    if (params.length >= 2) {
                        $.ajax({
                            type: "post",
                            url: "cloud-letter/customer/get",
                            dataType: 'json',
                            data: {qymc: params},//表单数据
                            async: false,
                            success: function (d) {
                                var  data=d.data;
                                if (data.length!=0){
                                    selectCreate("customer1",data,params);
                                    $("#customer1").next().find('input').removeAttr("readonly");
                                    $("#customer").next().find('input').removeAttr("readonly");
                                    $("#customer1").next().find('input').val(params);
                                    setTimeout(function () {
                                        $("#customer1").next().find('input').click();
                                        $("#customer1").next().find('input').focus();
                                    },0)
                                }
                            }
                        });
                    }
                }
            },0);
        }
        $(document).on('keyup', '.customerA input', myFun);
        $(document).on('keyup', '.customerB input', myFunB);

      var  selectCreate = function(filter, options,params) {
            var ELEM = '.layui-form';
            var CLASS = 'layui-form-select';
            var DISABLED = 'layui-disabled';
            var othis = $('[lay-filter="' + filter +'"]');
            var hasRender = othis.next('.'+CLASS);
            var arr = [];
            layui.each(options,
                function(index, item){
                    if(arr.length === 0){
                        arr.push('<option value="" ></option>');
                    }
                    arr.push('<option value="' + item.cust_id + '"' + '>' + item.cust_name + '</option>');
                });
            arr.length === 0 && arr.push('<option value=""  class="' + DISABLED + '">没有选项</option>');
            hasRender[0] && hasRender.remove(); //如果已经渲染,则Rerender
            othis.empty();
            othis.append(arr.join(''));
           form.render('select');
      };



        //监听提交
        form.on('submit(demo1)', function (data) {
            data.field["userInfoCode"] = getUrlData().code;
            layer.alert(JSON.stringify(data.field), {
                title: '最终提交信息'
            });

            layer.open({
                type: 2
                , id: 'layerDemo'//防止重复弹出
                , area: ['280px', '330px']
                , title: '二维码支付'
                , fixed: true
                , zIndex: 999
                , content: 'qrCode.html'
                , success: function (layero, index) {
                    // 获取子页面的iframe
                    var iframe = window['layui-layer-iframe' + index];
                    // 向子页面的全局函数child传参
                    // iframe.child(data);
                }
                , shade: 0.2 //不显示遮罩

            });
            return false;
        });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值