Autocomplete with Json and auto populate other field

[samratsaha2Participant]

Hi There,
Please help me with following scenario,

I have a Json array as below
[{“addreess”:”8101 Research Forest Drive”,”city”:”The Woodlands”,”state”:”TX”,”country”:”US”,”zip”:”77382″},{“addreess”:”5910 FM 1488″,”city”:”Magnolia”,”state”:”TX”,”country”:”US”,”zip”:”77354″}]

I am trying to build a auto complete feature on Address field which will match according to “startWith” and as soon as select the candidate should populate other fields like city,state,country,zip.

Thanks in advance,
below is extracted from my code ,

$.ajax({
url: “${pageContext.request.contextPath}/search/autoComplete”,
data: JSON.stringify(addressAutoCompleteRequest),
dataType : “text xml”, // expecting a plain text but should be treated as xml,
contentType : ‘application/json’,
type: “POST”,
cache: false,
async : false,
complete: function(response){
var responseDoc = $.parseXML(response.responseText);
//alert(response.responseText);
console.log(new XMLSerializer().serializeToString(responseDoc));
//showDriverConfOnMap(responseDoc);
//searchCandidateWithDriverConfirmation(responseDoc);
var candidates = new Array() ;
$(responseDoc).find(‘CANDIDATE’).each( function () {

candidates.push(
{
“addreess”:$(this).find(‘address’).text(),
“city”:$(this).find(‘city’).text(),
“state”:$(this).find(‘state’).text(),
“country”:$(this).find(‘country’).text(),
“zip”:$(this).find(‘zip’).text()
}

);

});
console.log(JSON.stringify(candidates));
$(“#city”).jqxInput({placeHolder: “Enter a City”, height: 25, width: 200, minLength: 1,
source: function(query,response) {
var dataAdapter = new $.jqx.dataAdapter
(
{
datatype: “Array”,
datafields:
[
{ name: ‘address’ },
{ name: ‘city’ },
{ name: ‘state’},
{ name: ‘country’ },
{ name: ‘zip’ }
],
localdata:candidates
},
{
autoBind: true,
formatData: function (data) {
data.query = query;
return data;
},
loadComplete: function (data) {
if (data.length > 0) {
response($.map(data, function (item) {
return item.address;
}));
}
}
}

)

}

});
}
});

[VladimirParticipant]

Hello samratsaha2

I am not exactly sure what and why you are trying to achieve here, from what I see you are trying to mimic the AutoComplete demo, which is using geonames service. However some of the logic there is specifically written to handle that service’s specifics, and may not be needed in your case.

Please check this demo, something similar might be more useful to you.

Best Regards,
Vladimir

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts