jQuery 自动完成源为空

Posted 2023-05-08

【中文标题】jQuery 自动完成源为空

【英文标题】：jQuery autocomplete source is null

【发布时间】：2019-12-08 02:36:29

【问题描述】：

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

未捕获的类型错误：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>

【问题讨论】：

您需要在 AJAX Success 中设置 Source。

【参考方案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>

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

Source | Autocomplete | jQuery UI API Documentation

希望对您有所帮助。

【讨论】：

虽然我找到了另一种方法，但是这种方法听起来容易多了。答案对我有所帮助，我希望这可以解决有关自动完成的其他问题，因为代码代表了一个非常好的和简单的 jQuery 自动完成示例。