jquery autocomplete, как вставить loading в dropdown а затем отобразить список
Я хочу отобразить dropdown во время search, чтобы туда засунуть блок с loading пока ожидаю ответ от сервера, а затем в немже(dropdown) отобразить вернувшиеся данные
search пытаюсь сделать renderItem, но это не работает для меня
renderItem срабатывает только уже в response
Как я могу сделать renderItem с loading а затем туда запихнуть список элементов которые мне вернет сервер?
jQuery('#new-form-address').on('input', function () {
const selectedCountry = jQuery('.model-number-container').find('.iti__selected-flag').find('.iti__flag')[0].classList[1];
if (selectedCountry.slice(selectedCountry.length - 2) === 'us') {
jQuery('#new-form-address').autocomplete({
source: function (request, response) {
jQuery.ajax({
url: apiRequests.autocompleteAddress,
type: "GET",
data: {"address": request.term, "selected": selected},
success: function (data) {
let autocomplete = {};
if (data.code === 'success') {
selected = false;
jQuery.each(data.message, function (arKey, arValue) {
let autocompleteString = '';
let i = 0;
jQuery.each(arValue, function (key, value) {
if (i === 0) autocompleteString += value;
else if (key === 'secondary') autocompleteString += ';' + value + ';';
else if (key === 'entries') {
if (value > 1) autocompleteString += '(' + value + ' more entries);';
} else autocompleteString += value + ';';
i++;
});
autocomplete[arKey] = autocompleteString;
});
response(autocomplete);
} else {
jQuery('.message-validate-address').text('Please, select address form dropdown.');
jQuery('.message-validate-address').show();
}
}
});
}, select: function (event, ui) {
jQuery("ul.ui-autocomplete").hide();
if (ui.item.label) {
const label = ui.item.label.split(';');
if (label.length == 6) {
userUSAddress = {
city: label[2],
country: 'US',
state: label[3],
street_number: label[0],
zipCode: label[4],
subpremise: label[1]
};
jQuery("#new-form-address").val(ui.item.label.replace(/;/g, ' '));
return false;
} else {
selected = true;
setTimeout(function () {
const entries = label[5].split(' ');
jQuery('#new-form-address').autocomplete('search', label[0] + ' ' + label[1] + ' ' + entries[0] + ') ' + label[2] + ' ' + label[3] + ' ' + label[4]);
}, 0);
jQuery("#new-form-address").val(ui.item.label.replace(/;/g, ' '));
return false;
}
}
}, minLength: 3,
close: function () {
if (!jQuery("ul.ui-autocomplete").is(":visible")) {
jQuery("ul.ui-autocomplete").show();
}
},
search: function (ul) {
jQuery(this).data('ui-autocomplete')._renderItem = function (ul) {
return jQuery("<li class='autocomplete-address-li'>")
.append("<div class='redirect-loader'><div class=\"lds-ring\"><div></div><div></div><div></div><div></div></div></div>")
.appendTo(ul);
}
},
response: function (ul, item) {
jQuery(this).data('ui-autocomplete')._renderItem = function (ul, item) {
return jQuery("<li class='autocomplete-address-li'>")
.append("<div data-address='" + item.label + "'>" + item.label.replace(/;/g, ' ') + "</div>")
.appendTo(ul);
}
}
});
jQuery("#new-form-address").autocomplete("enable");
} else {
jQuery('#new-form-address').autocomplete('disable')
}
});