Add custom div in end of jQuery UI Autocomplete with list

Question

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?

jcarrera · Accepted Answer · 2023-08-09 10:47:45Z

1

You can try adding a callback for the open event:

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

answered Aug 9, 2023 at 10:47

jcarrera

1,0661 gold badge17 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Add custom div in end of jQuery UI Autocomplete with list

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related