JQueryUI autocomplete not updating source array on keystroke-CodePudding

I have an issue with trying to implement a JQuery-UI autocomplete dropdown in an input textbox. The dropdown should update with every keystroke. While the data array (establishments) which is retrieved from the url endpoint is correctly updated based on input with each keystroke, the autocomplete function seems to not update its source correctly, i.e. it seems like autocomplete is only filtering the results from the initial array, and not the arrays which are continuously being updated.

It seems like the same issue as the one described here: Jquery UI Autocomplete List does not refresh. For example, a data array is returned on the first keystroke and the dropdown reflects this, but as the user inputs more characters, the autocomplete only filters the initial array based on further input, rather than updating its source each time. The difference between the thread mentioned above and my problem is that my data array returned from the endpoint does update correctly, so it's not a sockets/backend problem, it's just that autocomplete only uses the initial array and not updated ones.

    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'
        });
    }

CodePudding user response：

Consider the following example.

    $("#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;
      }
    });

This should be assigned in your Script header and not as a Callback.

Here you can see that when Autocomplete is opened and needs Source, it will make an AJAX Call.