I’m looking at this jQuery Autocomplete example.
What I can’t figure out is how much of this code depends on the structure of the returned JSON data.
For example, there is a line below:
name_startsWith: request.term
Is name_startsWith a function defined somewhere else or an implicit function of some kind?
What is reqest.term that it refers to? I can’t find the text term referred to anywhere else in the html document.
I want to try substituting my own JSON url into the example to see if it works but I don’t know how much of the example needs to change based on the structure of the JSON response data.
<script>
$(function() {
function log( message ) {
$( "<div/>" ).text( message ).prependTo( "#log" );
$( "#log" ).attr( "scrollTop", 0 );
}
$( "#city" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "http://ws.geonames.org/searchJSON",
dataType: "jsonp",
data: {
featureClass: "P",
style: "full",
maxRows: 12,
name_startsWith: request.term
},
success: function( data ) {
response( $.map( data.geonames, function( item ) {
return {
label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
value: item.name
}
}));
}
});
},
minLength: 2,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.label :
"Nothing selected, input was " + this.value);
},
open: function() {
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
});
});
</script>
</head>
<body>
<div class="demo">
<div class="ui-widget">
<label for="city">Your city: </label>
<input id="city" />
Powered by <a href="http://geonames.org">geonames.org</a>
</div>
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
Result:
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
</div><!-- End demo -->
The
dataparameter is just a POJO (Plain Old Javascript Object) that gets serialized into a JSON string and sent as a collection of parameters to the server.In essence, you’re posting 4 parameters:
featureClass,style,maxRowsandname_startsWithwith the values"p","full",12and the value ofrequest.term(which is supplied through therequestparameter by the autocomplete widget, I believe).The server then processes the parameters it gets from the client and returns another JSON string, this time containing the following object:
This is basically an object with two properties:
totalResultsCount, containing the number of results as an integer, andgeonamesthat contains an array of result objects that carry specific properties, likecountryName,name,population, etc.This JSON object gets consumed in the
successfunction inside the$.ajax()function, where you can iterate over the individual objects:The map function in your example simply converts each result into a new object (containing
labelandvalueproperties) and collects them into an array that gets passed into theresponsefunction (passed into your AJAX call by the widget).So, to answer your question, if you simply want to change the URL, the service needs to answer with the same JSON structure as the one I pasted. If not, you can change the
successfunction to match the JSON structure that your service returns.