'jQuery UI - autocomplete widget show doesn't update ui-menu position
Whenever I search, the position correctly displays
But after some scrolling then displaying the results again using input.autocomplete('widget').show();
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 |


