JQuery UI Autocomplete无法随按键更新数据源数组问题求助

我完全懂你遇到的糟心情况——后端返回的establishments数组明明每次都跟着输入更新了，但Autocomplete却死抓着第一次的数组做过滤，根本没用到新数据。这是因为你当前的实现方式搞错了Autocomplete的核心用法：每次AJAX成功后都重新初始化组件，这不仅会造成状态冲突，还浪费了Autocomplete本身自带的动态数据源机制。

问题根源 #

你现在的逻辑是：用户按键→手动发AJAX→拿到新数据→重新创建Autocomplete实例。但Autocomplete如果直接用数组当source，只会在初始化那一刻读取一次这个数组，后续哪怕数组内容变了，组件也不会自动感知。更糟的是，重复初始化会覆盖之前的实例，导致组件状态混乱，自然没法正确更新下拉列表。

正确解决方案 #

Autocomplete的source选项支持传入一个函数，这个函数会在用户输入时自动触发，你可以在函数内部发起AJAX请求，拿到新数据后直接传给组件的回调函数，让它自动更新下拉列表。这样就不用手动管理按键事件和组件初始化了，完全交给Autocomplete自己处理。

修改后的代码如下：

// 只需要初始化一次Autocomplete，不用重复创建
$("#autocompleteThis").autocomplete({
  // 用函数作为source，自动响应用户输入
  source: function(request, response) {
    $.ajax({
      url: "{% url 'establishment-lookup' %}",
      type: "GET",
      // request.term就是用户当前输入的内容，不用手动获取输入框值
      data: {'term': request.term},
      success: function(data) {
        let establishment_dict = {};
        // 把后端返回的数据转换成Autocomplete需要的格式，同时构建id映射
        let establishments = $.map(data, function(item) {
          establishment_dict[item.label] = item.id;
          return item.label;
        });
        
        // 将处理好的数据源传给response，Autocomplete会自动更新下拉列表
        response(establishments);
        // 把id映射存到元素的data属性中，方便后续select事件使用
        $("#autocompleteThis").data('establishmentDict', establishment_dict);
      },
      dataType: 'json'
    });
  },
  select: function(event, ui) {
    // 从data属性中取出之前存储的id映射
    let establishment_dict = $(this).data('establishmentDict');
    $(this).val(ui.item.value);
    $("#est_id").val(establishment_dict[ui.item.value]);
    // 返回false阻止默认行为，避免输入框被意外修改
    return false;
  }
});

额外注意事项 #

1. 删掉之前绑定的按键事件（比如keyup触发establishmentSearch的代码），因为Autocomplete的source函数会自动响应用户输入，重复触发会导致冗余请求。
2. 确保后端返回的data结构中包含label字段（和你当前代码的逻辑一致），如果字段名不同，需要对应修改。

这样修改后，每次用户输入字符，Autocomplete都会自动发起AJAX请求获取最新的数据源，然后实时更新下拉列表，完全符合你的需求。

内容的提问来源于stack exchange，提问作者zzz