Reazur Rahman Reazur Rahman - 7 months ago 48
Java Question

jQuery autocomplete with java custom data and display store value

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:

package gov.dol.oalj.elmms.common.autocomplete;

import com.entellitrak.ApplicationException;
import com.entellitrak.PageExecutionContext;
import com.entellitrak.page.PageController;
import com.entellitrak.page.Response;
import com.entellitrak.page.TextResponse;

public class Controller implements PageController {

public Response execute(PageExecutionContext etk) throws ApplicationException {

TextResponse tr = etk.createTextResponse();

tr.setContentType("application/json");

try {


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

//String sqlJson = etk.createSQL("Select id AS value, c_first_name + ' ' + c_last_name AS label, c_address_1 AS desc from t_contact 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_contact 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_claimant, #CaseInput_claimantAttorney, #CaseInput_employer, #CaseInput_employerAttorney").autocomplete({

// autoFocus: true,

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







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) {
/*
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

I figured it out. This is what i had to do in the controller:

/**
 *
 * Page Controller
 *
 * rrahman 03/17/2016
 **/

package gov.dol.oalj.elmms.common.autocomplete;

import com.entellitrak.ApplicationException;
import com.entellitrak.PageExecutionContext;
import com.entellitrak.page.PageController;
import com.entellitrak.page.Response;
import com.entellitrak.page.TextResponse;

public class Controller implements PageController {

    public Response execute(PageExecutionContext etk) throws ApplicationException {

        TextResponse tr = etk.createTextResponse();

        tr.setContentType("application/json");

        try {


            String term = etk.getParameters().getSingle("term");


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

            tr.put("aadata", sqlJson);


        }catch (Exception e ) {

            e.printStackTrace();
        }


        return tr;

    }

}

This is what i did with the javascript:

function caseInputAutoComplete() {


    jQuery(document).ready(function() {
        jQuery(function() {
                jQuery("#CaseInput_claimant, #CaseInput_claimantAttorney, #CaseInput_employer, #CaseInput_employerAttorney").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 );
       };

});
});


}
Comments