'jQuery UI - autocomplete widget show doesn't update ui-menu position

Whenever I search, the position correctly displays

enter image description here

But after some scrolling then displaying the results again using input.autocomplete('widget').show();

enter image description here

The position alignment is still the same as the previous position. Is there a way to update the position(using jQuery UI Autocomplete position computation) before using the input.autocomplete('widget').show();?

Here is my code:

let itemTemplate = $("<li/>", {"class": "ui-menu-item"});
let itemWrapperTemplate = $("<div/>", {"class": "ui-menu-item-wrapper"});

$("input[autocomplete]").each(function() {
    let input = $(this);
    let autocomplete = input.attr("autocomplete");
    let searchResults = [];
    
    input.autocomplete({
        source: function(request, response) {
            const funcEval = function() {
                const funcAjaxCompleted = function(event, data, funcAutoCompleteSelect) {
                    input.off('ajaxSearch', funcAjaxCompleted);
                    input.off("autocompleteselect");
                    if (typeof funcAutoCompleteSelect === "function") {
                        input.on("autocompleteselect", funcAutoCompleteSelect);
                    }
                    searchResults = data;
                    response(searchResults);
                }
                input.on('ajaxSearch', funcAjaxCompleted);
                eval(autocomplete);
            }
            funcEval.call(input[0]);
        },
        appendTo: input.parent(),
        minLength: 0
    }).on("focus click", function() {
        if (searchResults.length == 0 || input.val().trim() === "") {
            input.autocomplete("search", input.val());
        } else {
            input.autocomplete('widget').show();
        }
    }).autocomplete("instance")._renderItem = function(ul, item) {
        let itemClone = itemTemplate.clone();
        let itemWrapperClone = itemWrapperTemplate.clone();
        itemWrapperClone.text(item.code + " " + item.name);
        return itemClone.append(itemWrapperClone).appendTo(ul);
    };
});


Solution 1:[1]

I couldn't find if there's a function like that in jQuery UI Autocomplete so I tried to manually set the position using jQuery .offset() and .outerHeight() and it worked.

if (searchResults.length == 0 || input.val().trim() === "") {
    input.autocomplete("search", input.val());
} else {
    let offset = input.offset();
    let top = (offset.top + input.outerHeight()) + "px";
    let left = offset.left + "px";
    input.autocomplete('widget').css({"top": top, "left": left}).show();
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Brian Antiqueña