jQuery 自动完成源为空

Question

在用户 select 州和城市之后，触发 Ajax 从服务器检索数据。只有这样，我才想让他们使用 jQuery UI autocomplete 搜索结果。我在 Ajax 响应中填充了一个名为 agenciesBasedOnLocation 的变量（到目前为止一切正常）。但是当我将它添加到 autcomplete 的 source 时，它不起作用。错误是：

Uncaught TypeError: this.source is not a function

这是我的代码：

<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

由于自动完成是在 AJAX 调用执行之前初始化的，因此您需要在数据可用时更新或设置源。考虑以下因素：

<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>

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

Source | Autocomplete | jQuery UI API Documentation

希望对您有所帮助。

jQuery 自动完成源为空

jQuery autocomplete source is null

jquery

jquery-ui

jquery-ui-autocomplete