jQuery 自动完成源为空

Question

用户选择州和城市后，将触发 Ajax 以从服务器检索数据。只有这样，我才允许他们使用

jQuery UI autocomplete

搜索结果。 我在 Ajax 响应中填充了一个名为

agenciesBasedOnLocation

的变量（到目前为止一切顺利）。但是当我将其添加到

source

的

autcomplete

时，它不起作用。 错误是：

未捕获类型错误：this.source 不是函数

这是我的代码：

<script type="text/javascript">   
var agenciesBasedOnLocation;
$('#cityId').on('change',function(){
    var cityId = $('#toBeCollected').children().find('.cityId').val();
    var provinceId = $('#toBeCollected').children().find('.provinceId').val();
    $.ajax({
        url: window.baseUrl + "/getAllAgenciesByLocation",
        type: 'POST',
        data: {"cities_id":cityId,"provinces_id":provinceId,"agency_groups_id":$('#aGroups').val()},
        success: function(result)
        {
            agenciesBasedOnLocation = result;                               
        }
    });       
});

$("#autoComplete").autocomplete({
    source: agenciesBasedOnLocation,
    select: function( event, ui ) 
    {
        $("#autoComplete").val( ui.item.last_name + " - " + ui.item.mobile);
        alert(ui.item.id);            
        return false;
    }    
})
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
    return $( "<li>" )
        .append( "<span>" + item.label + 
            "</span><br><span style='font-size: 80%;'>Desc: " + item.mobile + "</span>" +
            "<br><span style='font-size: 60%;'>Other: " + item.last_name + "</span>" )
        .appendTo( ul );
};
</script>

Answer 1

由于 Autocomplete 是在执行 AJAX 调用之前初始化的，因此您需要在数据可用时更新或设置 Source。考虑以下几点：

<script type="text/javascript">   
var agenciesBasedOnLocation;
$('#cityId').on('change',function(){
  var cityId = $('#toBeCollected').children().find('.cityId').val();
  var provinceId = $('#toBeCollected').children().find('.provinceId').val();
  $.ajax({
    url: window.baseUrl + "/getAllAgenciesByLocation",
    type: 'POST',
    data: {
      "cities_id":cityId,"provinces_id":provinceId,"agency_groups_id":$('#aGroups').val()
    },
    success: function(result) {
      agenciesBasedOnLocation = result;
      $("#autoComplete").autocomplete("option", "source", agenciesBasedOnLocation);                             
    }
  });       
});

$("#autoComplete").autocomplete({
  source: [],
  select: function(event, ui) {
    $("#autoComplete").val( ui.item.last_name + " - " + ui.item.mobile);
    alert(ui.item.id);            
    return false;
  }    
});
.data("ui-autocomplete")._renderItem = function(ul, item) {
  return $( "<li>" )
    .append("<span>" + item.label + 
    "</span><br><span style='font-size: 80%;'>Desc: " + item.mobile + "</span>" +
    "<br><span style='font-size: 60%;'>Other: " + item.last_name + "</span>")
    .appendTo(ul);
};
</script>

当我们初始化 Autocomplete 时，它有一个空数组作为 Source。 AJAX 完成后，源就会更新以匹配新填充的数组。现在用户可以从该数组中进行搜索。

来源|自动完成 | jQuery UI API 文档