JQuery UI проблема автозаполнения

Question

У меня есть поле выбора, содержащее страны, и когда оно выбрано, я хочу, чтобы мои данные автозаполнения для поля города загружались через ajax.

вот мой код:

// 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");
}

Возвращает следующий json: ["Aberdare", "Aberdeen", "Aberystwyth", "Abingdon", "Accrington", "Airdrie", "Aldershot", "Alfreton", "Alloa", "Altrincham", ""Амерши», "Andover", "Антрит", "Арброит", "Ardrossan", "Арнольд", "Ашфорд", "Ашингтон", "Ashton-под-Лайн", "Атэртон", "Эйлсбери", "Эра", ...]

Но это не работает.Когда я начинаю печатать в поле города, стиль меняется, поэтому автозаполнение что-то делает, но не отображает эти данные.Если я жестко запрограммировал вышеприведенное, это работает.

Кто-нибудь может увидеть, что случилось?

Спасибо

Answer 1

Я думаю, что вы должны использовать метод обратного вызова для асинхронного вызова для получения удаленных данных JSON (см. Ajax / jQuery.getJSON ) Возможно, вы можете сохранить города в глобальной переменной или задать ответ непосредственно в качестве источника элемента управления автозаполнением:

function updateCities()
{
    var cityId = $("#registration_country_id :selected").attr('value');
    $.getJSON("/ajax/cities/" + cityId + ".html", function(json){
       CITY_CACHE = json;
       //Alternatively set the source of the autocomplete control
    });
}

Answer 2

Спасибо, но ответ был:

// Sets up the autocompleter depending on the currently
// selected country
$(document).ready(function() {

  setupAutocompleter();

  // update the cache array when a different country is selected
  $("#registration_country_id").change(function() {
    setupAutocompleter();
  });
});

function setupAutocompleter()
{
  var cityId = $("#registration_country_id :selected").attr('value');
  $.getJSON("/ajax/cities/" + cityId + ".html", function(cities) {
    $('#registration_city_id').autocomplete(
      {
        source: cities
      }
    )
  });
}