Hi,
i've got a select box containing countries, and when one is selected, i want my autocomplete data for the city field to load via ajax.
here's my code:
// Sets up the autocompleter depending on the currently
// selected country
$(document).ready(function() {
var cache = getCities();
$('#registration_city_id').autocomplete(
{
source: cache
}
);
cache = getCities();
// update the cache array when a different country is selected
$("#registration_country_id").change(function() {
cache = getCities();
});
});
/**
* Gets the cities associated with the currently selected country
*/
function getCities()
{
var cityId = $("#registration_country_id :selected").attr('value');
return $.getJSON("/ajax/cities/" + cityId + ".html");
}
This returns the following json:
["Aberdare","Aberdeen","Aberystwyth","Abingdon","Accrington","Airdrie","Aldershot","Alfreton","Alloa","Altrincham","Amersham","Andover","Antrim","Arbroath","Ardrossan","Arnold","Ashford","Ashington","Ashton-under-Lyne","Atherton","Aylesbury","Ayr",... ]
But, it doesn't work. When i start typing in the city box, the style changes so the autocompleter is doing something, but it won't display this data. If i hard-code the above it works.
Can anyone see what's wrong?
Thanks