Add custom div in end of jQuery UI Autocomplete with list

I want to add a custom div at the end of jQuery-autocomplete list

I tried adding that custom div under ul.

autoCompleteDiv.data("ui-autocomplete")._renderMenu = function (ul: JQuery, items: any) {
                var that = this;
                let extraDivHtml: string = '';
                $.each(items, function (_key, value) {
                    if (value.IsExtraDivHtml=== false) {
                        that._renderItemData(ul, value);
                    } else {
                        extraDivHtml= value.ExtraDivHtml;
                    }
                });

                if (extraDivHtml.length > 0) {
                    $(extraDivHtml).appendTo(ul);
                }
            };

But it's not showing properly and throwing error in console.

Can we do this using jQuery Autocomplete? Or any other JS, We can use this feature?

You can try adding a callback for the open event:

$("#yourAutocomplete").autocomplete({
    source: yourSource,
    'open': function(e, ui) {
        $(".ui-autocomplete").append(extraDivHtml);
}});