I encountered an issue with a widget that serves as a wrapper for an input and button. The problem arises when trying to display the dropdown on both input focus and button click. While it works fine on button click, the input only functions properly once; after that, it stops working. Even when selecting an option, the functionality remains erratic. The code snippet below outlines the implementation:
input = $("<input>")
.appendTo(wrapper)
.val(value)
.attr("title", "")
.autocomplete({
delay: 0,
minLength: 0,
appendTo: wrapper,
source: function (request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
response(select.children("option").map(function () {
var text = $(this).text();
if (this.value && (!request.term || matcher.test(text)))
return {
label: text,
value: text,
option: this
};
}));
},
.focus(function () {
$(".ui-combobox").addClass("focus");
if (wasOpen) {
return;
}
input.autocomplete("search", "");
})
.blur(function () {
$(".ui-combobox").removeClass("focus");
});
// creating the anchor button
$("<button></button>")
.attr("tabIndex", -1)
.addClass("br-r")
.appendTo(wrapper)
.mousedown(function () {
wasOpen = input.autocomplete("widget").is(":visible");
})
.click(function () {
input.focus();
if (wasOpen) {
return;
}
input.autocomplete("search", "");
});
},
The above excerpt provides insight into the required functionality and the issues encountered in its implementation.