jQuery autocomplete source is null

Question

After user select state and city, an Ajax is fired to retrieve data from server. Only then, I want to allow them to search through the results using jQuery UI autocomplete. I fill a variable named agenciesBasedOnLocation in the Ajax response (so far so good). But when I add this to source of the autcomplete, it's not working. The error is:

Uncaught TypeError: this.source is not a function

Here's my code:

<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

Since Autocomplete is initialized before the AJAX call is performed, you need to update or set the Source when the data is available. Consider the following:

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

When we initialize Autocomplete, it has an empty array as the Source. Once the AJAX completes, the Source is updated to match the newly populated Array. Now Users can search from that array.

Source | Autocomplete | jQuery UI API Documentation