1

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);
};
1
  • Nothing looks outwardly incorrect. Would advise providing an example of the data that is sent to response(). This can be done in success with console.log(ret); before you send to response. Commented Jul 5, 2017 at 17:07

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.