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： [“阿伯德尔”、“阿伯丁”、“阿伯里斯特威斯”、“阿宾登”、“阿克灵顿”、“艾尔德里”、“奥尔德肖特”、“阿尔弗里顿”、“阿洛”、“奥特灵厄姆”、“阿默舍姆”、“安多佛”、”安特里姆”、“阿布罗斯”、“阿德罗森”、“阿诺德”、“阿什福德”、“阿什顿”、“阿什顿安德莱恩”、“阿瑟顿”、“艾尔斯伯里”、“艾尔”，...]

但是，它不起作用。当我开始在城市框中输入内容时，样式会发生变化，因此自动完成器正在执行某些操作，但它不会显示此数据。如果我对上面的内容进行硬编码，它就可以工作。

谁能看出出了什么问题吗？

谢谢

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