jquery 自动完成并使用 ajax 调用生成数组

Question

我正在尝试对通过ajax调用从数据库获取的一些国家/地区进行jquery ui自动完成

我正在努力研究如何将我的值表传递给自动完成

 $( document ).ready(function() {

    $.ajax({
        url:Routing.generate('e_veilleur_user_register_countries_autocomplete'),
        type:"get",
        dataType: 'json',
        data: 'test=cool',
        async: true,
        cache: true,
        success: function(data){
            var availableTags = data;
        }
    });

    $( "#fos_user_registration_form_pays" ).autocomplete({
        source: availableTags
    });
  });

我的ajax调用的结果是

[{"countryName":"United States"},
 {"countryName":"Canada"},
 {"countryName":"Afghanistan"},
 {"countryName":"Albania"},
 {"countryName":"Algeria"}

给出错误:availableTags 未定义

Answer 1

您可以使用自定义函数作为源，它使用 AJAX。因此您不必与范围之外的 AJAX 调用同步。

$( "#fos_user_registration_form_pays" ).autocomplete({
    source: function(request, response) {
       $.ajax({
       url:Routing.generate('e_veilleur_user_register_countries_autocomplete'),
       type:"get",
       dataType: 'json',
       data: 'test=cool',
       async: true,
       cache: true,
       success: function(data){
          response(data);
       }
     });
    }
});

jQuery UI Autocomplete Source

编辑

到目前为止我还没有看到评论。回答该特定评论时，您只需从 AJAX 中调用自动完成即可。

$.ajax({
    url:Routing.generate('e_veilleur_user_register_countries_autocomplete'),
    type:"get",
    dataType: 'json',
    data: 'test=cool',
    async: true,
    cache: true,
    success: function(data){
        $( "#fos_user_registration_form_pays" ).autocomplete({
        source: data
        });
    }
});