Question

我有一个名为customer的表单字段。我有一个名为“gatecode”的第二个表单字段。我希望能够选择一个客户（现在通过自动完成脚本工作），并且在选择现有客户时，自动填充该客户的相应“门代码”。这可能吗？

现在发生的事情是第二个表单字段在加载时是空白的，并且只要表单被保存就会覆盖“gatecode”。

相应的客户代码：

public class Config{
        ...
public static final List<Object[]> config = new ArrayList<>();
static{
//object[] are always pairs her`e
config.add(new Object[] { ... whatever});
config.add(new Object[] { ... whatever});
config.add(new Object[] { ... whatever});
}
}
...
//then the test class:
@RunWith(Parameterized.class)
public class GeneralTemplate{

...

    @Parameters(name = "{index}: source: {0} target: {1}")
    public static Collection<Object[]> config() {
        return Config.config;
    }
}

门禁码

<input data-type="customerName" value="<?php echo isset($invoice['Client']['customerName']) ? $invoice['Client']['customerName']: ''; ?>"  type="text" class="form-control" id="clientCompanyName" placeholder="Company Name">

当前的Jquery代码：

  <input type="text" class="form-control" id="customer_GateCode_modal" name="customer_GateCode_modal" placeholder="Gate Code">

当前邮政编码（用于警报代码值）：

$('#clientCompanyName').autocomplete({
    source: function( request, response ) {
        $.ajax({
            url : 'ajax.php',
            dataType: "json",
            method: 'post',
            data: {
                name_startsWith: request.term,
                type: 'customerName'
            },
            success: function( data ) {

                if(!data.length){
                    var result = [
                      {
                          label: 'No Client found', 
                          value: ''
                      }
                    ];
                    response(result);
                }else{
                    response( $.map( data, function( item ) {
                        var code = item.split("|");
                            return {
                                label: code[1],
                                value: code[1],
                                data : item
                            }
                        }));
                    }
                }



            });
    },
    autoFocus: true,            
    minLength: 2,
    select: function( event, ui ) {
        if( typeof ui.item.data !== "undefined" ){
            var names = ui.item.data.split("|");
            $(this).val(names[1]);
            getClientAddress(names[0]);
            //getAlarmCode(names[0]);
            //getOtherData(names[0]);
            //getOtherData2(names[0]);
            //getOtherData3(names[0]);
            //getOtherData4(names[0]);
            $('#client_id').val( names[0] );
        }else{
            return false;
        }

    }               
});
function getClientAddress(id){

     $.ajax({
         url: "ajax.php",
         method: 'post', 
         data:{id:id, type:'clientAddress'},
         success: function(result){
            $("#clientAddress").html(result);
        }
     });
}
function getAlarmCode(id){

     $.ajax({
         url: "ajax.php",
         method: 'post', 
         data:{id:id, type:'alarmcode'},
         success: function(result){
            $("#alarmcode").html(result);
        }
     });
}

Answer 1

使用jQueryUi。 jQueryUi提供了一个自动complet函数，可以调用web服务（即ajax调用）。你需要传递你要搜索的内容（'{value：“'+ request.term +'”}'）。它需要一个包含clientCompanyName和gatecode元素的项目列表。从门代码更新的可用项列表中选择了什么东西。当在一个项目上收到焦点时，两个文本框都会更新。

$("#clientCompanyName").autocomplete({
            source: function(request, response) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: //webservicecall,
                    dataType: "json",
                    data: '{value:"' + request.term + '"}',
                    success: function(data) {
                        response($.map(data.d, function (item) {
                            return {
                                label: item.clientCompanyName,
                                value: item.gateCode
                            }
                        }));
                    }
                });
            },
            minLength: 2,
            select: function (event, ui) {
                event.preventDefault();
                $("#clientCompanyName").val(ui.item.key);
                $("#customer_GateCode_modal").val(ui.item.value);
            },
            focus: function (event, ui) {
                event.preventDefault();
                if (ui.item != null) {
                    $("#clientCompanyName").val(ui.item.key);
                    $("#customer_GateCode_modal").val(ui.item.value);
                }
            }
        }

参考：

jQueryUI AutoComplete

根据其他表单字段更新表单字段

1 个答案:

参考：