jQuery UI Autocomplete JSON gives error: Uncaught TypeError: Cannot use 'in' operator to search for '62' in

ajax, autocomplete, jquery, jquery-ui, json

Solution

It was a long road, but after many hours of experimenting I came up with this code:

$("#searchInput").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: '@Url.Action("GetKeywords", "Home")',
            dataType: "json",
            data: {
                SearchTerm: request.term
            },
            success: function (data) {
                var parsed = JSON.parse(data);
                var newArray = new Array(parsed.length);
                var i = 0;

                parsed.forEach(function (entry) {
                    var newObject = {
                        label: entry.kwrdKeyWord
                    };
                    newArray[i] = newObject;
                    i++;
                });

                response(newArray);
            },
            error: function (message) {
                response([]);
            }
        });
    },
    minLength: 2
});

This appears to work fine. The truth is my keywords are unique, so I can live without the ID anyway.

Problem

I am having a great deal of trouble getting autocomplete to work on my page. When I enter 2 characters ("OW") into my search input, I get the preloader image (see below), but it never goes away and I never get the autocomplete popup. Looking at the console in Chrome shows: ``` Uncaught TypeError: Cannot use 'in' operator to search for '62' in [{"value":103,"label":"FLOWER"},{"value":105,"label":"YELLOW"}] ``` Here is the actual string that is being returned (confirmed by adding an alert(data) in the success block): ``` [{"kwrdID":103,"kwrdKeyWord":"FLOWER"},{"kwrdID":105,"kwrdKeyWord":"YELLOW"}] ``` Here is the main code for the autocomplete ``` $("#searchInput").autocomplete({ source: function (request, response) { $.ajax({ url: '@Url.Action("GetKeywords", "Home")', dataType: "json", data: { SearchTerm: request.term }, success: function (data) { response($.map(data.keywords, function (item) { return { label: item.kwrdKeyWord, value: item.kwrdID } })); } }); }, minLength: 2 }); ``` And finally, here is the preloader (just in case it's related). ``` $(document).ajaxStart(function () { var position = $('#divParent').position(); position.left += (($('#divParent').width() / 2) - ($('#preloader').width() / 2)); position.top += (($('#divParent').height() / 2) - ($('#preloader').height() / 2)); $('#preloader').css(position).show(); $('#preloader').show(); }).ajaxStop(function () { $('#preloader').hide(); }); ``` Can anyone help to explain what's going on here?

Original source