Question

jQuery UI Autocomplete (code below) works just fine when the returned JSON is an Array. But my returned JSON is an object that contains an array. So instead of being Rows[] it’s Object.Rows[]

I can’t seem to get the syntax right below. I would have thought item would have just switched to item.Rows, but that did not seem to work. Help

$('#reportingLocationLookup').autocomplete({
    minLength: 3,
    delay: 1000, //milliseconds,  
    source: function (request, response) {
        var dto = { 'term': request.term, 'take': 10 };
        //Ajax
        var urlMethod = window.siteRoot + "Invoices/ListPostalLocations";
        var jsonData = JSON.stringify(dto);
        window.SendAjax(urlMethod, jsonData, response);
    },
    focus: function () {
        return false;
    },
    select: function (event, ui) {
        return false;
    }
}).data("autocomplete")._renderItem = function (ul, item) {
    return $("<li></li>")
    .data("item.autocomplete", item)
    .append("<a>" + item.PostalCode + " - " + item.CityAlias + ", " + item.StateAbbreviation + "</a>").appendTo(ul);
};

Answer 1

The autocomplete widget expects an Array to be supplied to the response function. What this means is that you’re going to have to tweak the success argument of your SendAjax call:

/* snip */
source: function (request, response) {
    var dto = { 'term': request.term, 'take': 10 };
    //Ajax
    var urlMethod = window.siteRoot + "Invoices/ListPostalLocations";
    var jsonData = JSON.stringify(dto);
    window.SendAjax(urlMethod, jsonData, function(data) {
        response(data.Rows);
    });
},
/* snip */

Basically, send response (autocomplete’s supplied callback function) the array in your response object.