How to get async in jQuery autocomplete

Question

I am using the jQuery autocomplete plugin. The situation is that the hint data is taken via the GET API method. I can't make the code wait until the end of accepting data from the API.

$('#vehicleBrand').autocomplete({
  source: function(request, response) {
    $('#vehicleBrandValue').val('');
    $.get('api/brands', {
      query: request.term,
      category: $('select[name="vehicleType"]').val()
    }, function(data) {
      response(data)
    })
  },
  select: function(event, ui) {
    $('#vehicleBrandValue').val(ui.item.data);
    event.target.classList.remove('border-danger');
    prepareModels(ui.item.data);
  },
  close: function(event, ui) {
    if (!$('#vehicleBrandValue').val()) {
      alertify.error('Error text here!');
      event.target.value = '';
      event.target.classList.add('border-danger');
      event.target.focus();
    }
  }
});

In the code above, on the source key, I call the get method to get the data.

let brand = data.car_brand;
$('#vehicleBrand').data("ui-autocomplete").search(brand) 
$("#vehicleBrand").data("ui-autocomplete").menu.element[0].firstChild.click()

In the code above I am looking for a car brand and click on it through the script. But the click occurs before the request for data on the source key has time to complete, and the click occurs in the undefined list. Where can I make the click wait for a response from the function by the key source ?

I tried to use Promise and async/await in function by key source, but it didn't work

Answer 1

Might advise the following:

$('#vehicleBrand').autocomplete({
  source: function(request, response){
    $.getJSON('api/brands', {
      query: request.term,
      category: $('select[name="vehicleType"]').val()
    }, function(data){
      response(data);
    });
  },
  select: function(event, ui) {
    $('#vehicleBrandValue').val(ui.item.value);
    $(this).removeClass('border-danger');
    prepareModels(ui.item.label);
  },
  close: function(event, ui) {
    if (!$('#vehicleBrandValue').val()) {
      alertify.error('Error text here!');
      $(this).val("").addClass('border-danger').focus();
    }
  }
});

Need to also make sure that you have { label, value } pair someplace in your data results.

See more: https://api.jqueryui.com/autocomplete/#option-source

Using $.getJSON() is short hand for a AJAX GET Request that is expecting JSON data as a result.

If you are later using this code:

let brand = data.car_brand;
$('#vehicleBrand').data("ui-autocomplete").search(brand) 
$("#vehicleBrand").data("ui-autocomplete").menu.element[0].firstChild.click()

The code will execute right away, before results have loaded. You may need to delay the trigger using setTimeout since there is not a Promise to execute after. Something like this might work:

$('#vehicleBrand').autocomplete("search", data.car_brand);
setTimeout(function(){
  $("#vehicleBrand").autocomplete("widget").find(".ui-menu-item:eq(0)").trigger("click");
}, 1200);

This give Autocomplete time to load the events before triggering a click event.