JQueryUI 自动完成不会在击键时更新源数组

Question

我在尝试在输入文本框中实现 JQuery-UI 自动完成下拉菜单时遇到问题。下拉菜单应随每次击键而更新。虽然从 url 端点检索的数据数组（机构）根据每次击键的输入正确更新，但自动完成功能似乎没有正确更新其源，即自动完成似乎只是过滤来自的结果初始数组，而不是不断更新的数组。

这似乎与此处描述的问题相同：Jquery UI Autocomplete List does not refresh。例如，第一次击键时返回一个数据数组，下拉列表反映了这一点，但随着用户输入更多字符，自动完成仅根据进一步输入过滤初始数组，而不是每次都更新其源。上面提到的线程和我的问题之间的区别是我从端点返回的数据数组确实更新正确，所以这不是 sockets/backend 问题，只是自动完成只使用初始数组而不是更新的数组。

`

    function establishmentSearch() {

        $.ajax({
            url : "{% url 'establishment-lookup' %}",
            type : "GET",
            data : {'term':$( "#autocompleteThis" ).val()},
            success : function updateDropdown(data){
                establishment_dict = {}
                for (let i = 0; i < data.length; i++) {
                    establishment_dict[`${data[i]['label']}`] = data[i]['id']
                }
                establishments = $.map(establishment_dict, function(value, key) { return key });
                console.log(establishments)
                $("#autocompleteThis").autocomplete({source: establishments,
                    select:  function( event, ui ) {
                        $( "#autocompleteThis" ).val(establishment_dict[ui.item.value])
                        $( "#est_id" ).val(establishment_dict[ui.item.key])
                    }})
                },
            dataType: 'json'
        });
    }

`

Answer 1

考虑以下示例。

    $("#autocompleteThis").autocomplete({
      source: function(request, response) {
        $.ajax({
          url: "{% url 'establishment-lookup' %}",
          type: "GET",
          dataType: 'json',
          data: {
            'term': request.term
          },
          success: function(data) {
            var results = [];
            $.each(data, function(key, val) {
              results.push({
                'label': val.label,
                'value': val.id
              });
            });
            response(results);
          }
        })
      },
      select: function(event, ui) {
        $("#autocompleteThis").val(ui.item.value);
        $("#est_id").val(ui.item.label);
        return false;
      }
    });

这应该在您的脚本中分配 header 而不是作为回调。

这里可以看到当Autocomplete打开需要Source时，会进行AJAX调用

JQueryUI 自动完成不会在击键时更新源数组

JQueryUI autocomplete not updating source array on keystroke

jquery

jquery-ui

jquery-ui-autocomplete