What do I need to change in this jQuery Autocomplete example to get it to work with my JSON url?
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
},
s开发者_Python百科uccess: 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 data parameter 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, maxRows and name_startsWith with the values "p", "full", 12 and the value of request.term (which is supplied through the request parameter 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:
jsonp1290623850128({
"totalResultsCount": 55,
"geonames": [{
"countryName": "Indonesia",
"adminCode1": "30",
"fclName": "city, village,...",
"score": 19.488441467285156,
"countryCode": "ID",
"lng": 106.4183333,
"adminName2": "",
"adminName3": "",
"fcodeName": "populated place",
"adminName4": "",
"timezone": {
"dstOffset": 7,
"gmtOffset": 7,
"timeZoneId": "Asia/Jakarta"
},
"toponymName": "Test",
"fcl": "P",
"continentCode": "AS",
"name": "Test",
"fcode": "PPL",
"geonameId": 1959830,
"lat": -6.1052778,
"adminName1": "West Java",
"population": 0
},
{
"alternateNames": [{
"name": "http://en.wikipedia.org/wiki/Pomerode",
"lang": "link"
}],
"countryName": "Brazil",
"adminCode1": "26",
"fclName": "city, village,...",
"score": 18.81304168701172,
"countryCode": "BR",
"lng": -49.17694444,
"adminName2": "",
"adminName3": "",
"fcodeName": "populated place",
"adminName4": "",
"timezone": {
"dstOffset": -3,
"gmtOffset": -2,
"timeZoneId": "America/Sao_Paulo"
},
"toponymName": "Testo",
"fcl": "P",
"continentCode": "SA",
"name": "Testo",
"fcode": "PPL",
"geonameId": 3453245,
"lat": -26.74055556,
"adminName1": "Santa Catarina",
"population": 21898
},
// ---- [snip] ----
{
"countryName": "Turkey",
"adminCode1": "23",
"fclName": "city, village,...",
"score": 13.442560195922852,
"countryCode": "TR",
"lng": 39.126705,
"adminName2": "",
"adminName3": "",
"fcodeName": "populated place",
"adminName4": "",
"timezone": {
"dstOffset": 3,
"gmtOffset": 2,
"timeZoneId": "Europe/Istanbul"
},
"toponymName": "Testek",
"fcl": "P",
"continentCode": "AS",
"name": "Testek",
"fcode": "PPL",
"geonameId": 299236,
"lat": 38.458786,
"adminName1": "Elazığ",
"population": 0
}]
});
This is basically an object with two properties: totalResultsCount, containing the number of results as an integer, and geonames that contains an array of result objects that carry specific properties, like countryName, name, population, etc.
This JSON object gets consumed in the success function inside the $.ajax() function, where you can iterate over the individual objects:
for(var i = 0; i < data.geonames.length; i++) {
var current = data.geonames[i]; // the current object
}
The map function in your example simply converts each result into a new object (containing label and value properties) and collects them into an array that gets passed into the response function (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 success function to match the JSON structure that your service returns.
name_startsWith is the name of a variable that you are passing.
request.term is likely to be the value of the #city input field.
加载中,请稍侯......
精彩评论