I am using jquery ui 1.12.1 and jquery 3.1.1. I'm trying to get my autocomplete working. So far I have results displaying and populating correctly. However I'm running into an issue with ui.item being undefined in the select function. Which is causing all sorts of issues down the line. I've seen several other questions on the topic but none specifically using the instance option. Any help to point me in the direction would be appreciated.
http://api.jqueryui.com/autocomplete/#method-instance
Jquery Autocomplete Select TypeError: ui.item undefined
$("#municipality").blur(function () {
var keyEvent = $.Event("keydown");
keyEvent.keyCode = $.ui.keyCode.ENTER;
$(this).trigger(keyEvent);
}).autocomplete({
minLength: 3,
autoFocus: true,
position: { collision: "flipfit" },
source: function (request, response) {
var muniUrl = serviceUrl + "sns/getinfobyterm?term=" + encodeURIComponent(request.term);
$.ajax({
url: muniUrl,
contentType: 'application/json',
xhrFields: {
withCredentials: true
},
beforeSend: function (xhr) {
xhr.setRequestHeader("Authorization", "Bearer " + webServiceToken);
},
type: 'get',
error: function (ret) {
BccViewModel.errorForUser("Unable to get municipalities. Please try again later.");
$("#FinancialErrorPopup").modal();
console.log(ret);
},
success: function (ret) {
response(ret);
},
complete: function (ret) {
$("#municipality").removeClass("ui-autocomplete-loading");
}
});
},
select: function (event, ui) {
ClearModelAfterMunicipalityChange();
if (ui.item !== null) {
ProcessMunicipalityData(ui.item);
};
},
close: function () {
// change what's displayed in the input field to just the town name instead of full label from the autocomplete
$("#municipality").val(SnsViewModel.municipality());
}
}).autocomplete("instance")._renderItem = function (ul, item) {
return $("<li>")
.append("<div>" + item.MunicipalityInfo.MunicipalityLabel + "</div>")
.appendTo(ul);
};
response(). This can be done insuccesswithconsole.log(ret);before you send to response.