I am using Geonames for loading the cities using JSON. Geonames data i imported into my database. I am using MS SQL 2008 Server. I display a dropdown for country select. Once the user select the country. I am loading all the cities into the autocomplete textbox. I am facing a delay in the getJSON method. Also it seems like executing asynchronous. So before getting all the data my autocompelte is getting filled. Below is my complete script. I think i have some problem in the loop. Please advice me what i am doing wrong in my code.
$(document).ready(function () {
$("#ShowLoad").hide();
//Hook onto the MakeID list's onchange event
$("#Country").change(function () {
findcities = [];
$("#ShowLoad").show();
$("#HomeTown").unautocomplete();
var url = '<%= Url.Content("~/") %>' + "Location/GetCitiesCountByCountry/" + $("#Country").val();
$.getJSON(url, null, function (data) {
var total = data;
if (total > 0) {
var pageTotal = Math.ceil(total / 1000);
var isFilled = false;
for (var i = 0; i < pageTotal; i++) {
var skip = i == 1 ? 0 : (i * 1000) - 1000;
var url = '<%= Url.Content("~/") %>' + "Location/GetCitiesByCountry/" + $("#Country").val() + "?skip=" + skip;
//alert(i);
$.getJSON(url, null, function (data) {
$.each(data.Cities, function (index, optionData) {
if ($("#Country").val() == "US") {
findcities.push(optionData.asciiname + "," + optionData.admin1_code);
}
else {
findcities.push(optionData.asciiname);
}
});
if (i == pageTotal) {
//alert(findcities);
$("#ShowLoad").hide();
$("#HomeTown").focus().autocomplete(findcities);
}
});
}
$("#HomeTown").setOptions({
max: 100000
});
}
});
}).change();
});
