Question

Possible Duplicate:
jquery autocomplete this.source is not a function error

I have an autocomplete which I want to hook upto my API to return all customer account numbers. The problem is my API returns an object: AccountNumber, InvoiceNumber, Name, Address etc.. When I try to make my source the AccountNumber only, like below:

$.getJSON('/api/Customers', function(data) {
    $("#AccountNumber").autocomplete({
        source: data.AccountNumber,
        minLength: 4
    });
});

I get back this error:

Uncaught TypeError: Property 'source' of object #<Object> is not a function

Any ideas what Im doing wrong here?

Answer 1

Since the callback is returning an Object, you must pull the data and place it in an arary. As long as data is an array of Account Objects, you could try this:

$.getJSON('/api/Customers', function(data) {
    var acctNums = [];
    for(a in data) {
        acctNums.push(data[a].AccountNumber);
    }   

    $("#AccountNumber").autocomplete({
        source: acctNums,
        minLength: 4
    });
});

Another option would be to just add a different Request route that would only return an array of customer account numbers. That way you can just pass it as such:

$.getJSON('/api/Customers/AccountNums', function(data) {
    $("#AccountNumber").autocomplete({
        source: data,
        minLength: 4
    });
});

Finally, you could let the jQuery UI plugin handle the calls. You’ll need to create a different request route that returns an array of JSON objects only for Autocomplete (each contain value and label properties). Then just use the absolute or relative URL of your route to get the data. Below is a small example:

$("#AccountNumber").autocomplete({
    // This GET Request returns an Array of Objects used for Auto-Complete:
    // [ { label: "Choice1", value: "value1" }, ... ]
    source: '/api/Customers/AccountNumsAuto',
    minLength: 4
});