Estoy usando el complemento de autocompletar jQuery. La situación es que los datos de sugerencia se toman a través del método GET API. No puedo hacer que el código espere hasta el final de la aceptación de datos de la 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(); } } }); En el código anterior, en la clave source , llamo al método get para obtener los datos.
let brand = data.car_brand; $('#vehicleBrand').data("ui-autocomplete").search(brand) $("#vehicleBrand").data("ui-autocomplete").menu.element[0].firstChild.click() En el código anterior, busco una marca de automóvil y hago clic en ella a través del script. Pero el clic se produce antes de que la solicitud de datos en la clave de source tenga tiempo de completarse y el clic se produce en la lista indefinida. ¿Dónde puedo hacer que el clic espere una respuesta de la función por parte de la source clave?
Intenté usar Promise y async / await en función por source clave, pero no funcionó
Podría aconsejar lo siguiente:
$('#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(); } } }); También debe asegurarse de tener { label, value } par en algún lugar de sus resultados de data .
Ver más: https://api.jqueryui.com/autocomplete/#option-source
Usar $.getJSON() es una forma abreviada de una solicitud AJAX GET que espera datos JSON como resultado.
Si luego usa este código:
let brand = data.car_brand; $('#vehicleBrand').data("ui-autocomplete").search(brand) $("#vehicleBrand").data("ui-autocomplete").menu.element[0].firstChild.click() El código se ejecutará de inmediato, antes de que se carguen los resultados. Es posible que deba retrasar el desencadenador usando setTimeout ya que no hay una Promesa para ejecutar después. Algo como esto podría funcionar:
$('#vehicleBrand').autocomplete("search", data.car_brand); setTimeout(function(){ $("#vehicleBrand").autocomplete("widget").find(".ui-menu-item:eq(0)").trigger("click"); }, 1200);Esto le da tiempo a Autocompletar para cargar los eventos antes de activar un evento de clic.