Question

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

未捕获的TypeError：this.source不是函数

这是我的代码：

autcomplete

Answer 1

由于自动完成是在执行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>

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

Source | Autocomplete | jQuery UI API Documentation

希望有帮助。

jQuery自动完成源为空

1 个答案: