CODEWITHSUNDEEP
jqueryjquery-uiuser-interfacejquery-ui-autocomplete
Mark
Mark

Reputation: 2587

jQuery UI Autocomplete with custom JSON object

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);
};

Upvotes: 1

Views: 2433

Answers (1)

Andrew Whitaker
Andrew Whitaker

Reputation: 126052

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.

Upvotes: 4

Related Questions