jQuery autocomplete with java custom data and display store value

Question

I am working on jQuery autocomplete with java. I am trying to display my level and my address but only enter level in my field once I click on the choice but in the back end store only value when i click save on the form. Currently when i perform a search it only shows first and last name like Bob Smith but no address but when i click it. It only enters the value associated with bob smith which is 62 or could be something else because there could be two instance of bob smith. Currently the json is returning this:

[{"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"}]

Here is my java code:

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;

    }

}

Here is my javascript code:

    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);




                        }
                });
        }




});
});
});

Is there a way for me to show the label and address but once i click on the selection it only enters the label but in the background it stores the value?

Answer 1

I figured it out. This is what i had to do in the 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;

    }

}

This is what i did with the 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 );
       };

});
});


}