javascript - jQuery 自动完成与 java 自定义数据并显示存储值

Question

我正在使用 java 开发 jQuery 自动完成功能。我试图显示我的级别和地址，但只有在单击选项后才在字段中输入级别，但当我单击表单上的“保存”时，后端仅存储值。目前，当我执行搜索时，它只显示名字和姓氏，例如鲍勃史密斯，但没有地址，但当我单击它时。它仅输入与 bob smith 关联的值，即 62，或者可能是其他值，因为可能有两个 bob smith 实例。目前 json 返回的是:

[{"value":10,"label":"Bob Doe","address":""},{"value":17,"label":"Bob Doe","address":""},{"value":62,"label":"Bob Smith","address":"1234 Test Site"},{"value":63,"label":"Bob Smith","address":"1456 Test Site Two"}]

这是我的java代码:

public class Controller implements test {

    public Response execute(test t) throws App {

        TextResponse tr = t.createTextResponse();

        tr.setContentType("application/json");

        try {


            String term = t.getParameters().getSingle("term");
        //  String sqlJson = t.createSQL("Select c_first_name, c_last_name from t_ct").fetchJSON();

            //String sqlJson = t.createSQL("Select id AS value, c_first_name  + ' ' + c_last_name AS label, c_address_1 AS desc from t_ct where c_first_name like '%" + term + "%' order by c_first_name").fetchJSON();

            String sqlJson = etk.createSQL("Select id AS value, c_first_name + ' ' + c_last_name AS label, c_address_1 AS address from t_ct where c_first_name like '%" + term + "%' order by c_first_name ").fetchJSON();

            tr.put("aadata", sqlJson);


        }catch (Exception e ) {

            e.printStackTrace();
        }


        return tr;

    }

}

这是我的 JavaScript 代码:

    jQuery(document).ready(function() {
        jQuery(function() {
                jQuery("#CaseInput_ct, #CaseAttorney, #Cast_employer, #Caserney").autocomplete({

                  //  autoFocus: true,

                 // source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ]







                source : function (request, response) {
                jQuery.ajax({
                        url : "page.request.do?page=test",
                        type : "GET",
                        data : {
                                term : request.term
                        },
                        dataType : "json",
                        success : function(data) {  
                            /*
                            var dataArray = [];
                                for(var k = 0; k < data.length; k++) {
                                    // Add items to array
                                    dataArray.push(data[k].label + " " + data[k].description);
                                }
                             */
                                response(data);




                        }
                });
        }




});
});
});

有没有办法让我显示标签和地址，但一旦我单击选择，它只会输入标签，但在后台存储值？

Answer 1

我明白了。这是我必须在 Controller 中执行的操作:

public class Controller implements test {

    public Response execute(test t) throws A {

        TextResponse tr = t.createTextResponse();

        t.setContentType("application/json");

        try {


            String term = t.getParameters().getSingle("test");


            String sqlJson = t.createSQL("Select id AS value, c_first_name + ' ' + c_last_name AS label, c_address_1 AS [desc] from t_ct where c_first_name like '%" + term + "%' order by c_first_name ").fetchJSON();

            t.put("aadata", sqlJson);


        }catch (Exception e ) {

            e.printStackTrace();
        }


        return tr;

    }

}

这就是我用 javascript 所做的:

function casetest {


    jQuery(document).ready(function() {
        jQuery(function() {
                jQuery("#Caant, #CaseInporney, #CaseInput_employer, #CaerAttorney").autocomplete({





                source : function (request, response) {
                jQuery.ajax({
                        url : "page.request.do?page=page.ajax.autocomplete",
                        type : "GET",
                        data : {
                                term : request.term
                        },
                        dataType : "json",
                        success : function(data) {  


                               console.log(data);

                                response(data);

                        }

                });
        }, 


      focus: function( event, ui ) {
          jQuery(this).val(ui.item.label);
          jQuery(this).val(ui.item.value);


        return false;
      },  
       select: function( event, ui ) {


          jQuery(this).val(ui.item.label);
          jQuery(this).val(ui.item.value);

        return false;
      }


})

jQuery.ui.autocomplete.prototype._renderItem =  function( ul, item ) 
       {
         return jQuery( "<li>" )
         .append( "<a>" + item.label + " " + item.desc + "</a>" )
         .appendTo( ul );
       };

});
});


}