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

Ответы (0 шт):