Autocomplete in jQuery 1.4.2 jQuery UI 1.8.3

Question

I must be thick because I cannot for the life of me get jQuery autocomplete to work. I have searched for many many examples, and it seems that most of them use an older version of jQuery. I found one fairly good example directly from the jQuery UI site: http://jqueryui.com/demos/autocomplete/#remote-jsonp So I modeled mine after that example. When I type in my input box, the little autocomplete box pops underneath the input box, but there is nothing in the autocomplete box. My data is not being loaded correctly by jQuery.

My datasource is a URL that returns JSON data. Example: [{"pk": 1, "model": "concierge.location", "fields": {"online": false, "link": "", "email": "", "address": "TBA"}}, {"pk": 2, "model": "concierge.location", "fields": {"online": false, "link": "", "email": "", "address": "UB 2008"}}]

My Javascript code:

$(document).ready(function() {
    $("input#id_location_address").autocomplete({
        max: 10,

        source: function(request, response) {               
            $.ajax({
                url: "/concierge/autocomplete/locations/",
                dataType: "json",
                data: request,
                success: function( data ) {
                    console.log( data )
                    response( data, function(item) {
                        return { label: item.address, value: item.address }
                    });
                }
            });
        }
    });
});

So when I console.log(data) in Firebug, it shows the object with all the data in tact. I think I am not accessing the 'address' properly in my Javascript code. See really, I just want the 'address' to pop up in the autocomplete box. How do I do this?

Thanks in advance,

Chris

Answer 1

Try:

response($.map(data, function(item) {
    return {
        label: item.fields.address, // item.FIELDS ;)
        value: item.fields.address
    }
}));

Indeed, response expects an array as argument. $.map iterates over the data items and forms a new array of the return value from the passed mutator method. Once done, $.map returns the new array which will be the argument of response().

Answer 2

try

response($.map(data, function(item) {
    return {
        label: item.fields.address,
        value: item.fields.address
    }
}));

see the source of this demo

Answer 3

I figured it out. Needed to loop through the array of json objects and then put the data into an array. I got the idea of returning an array from the defualt jQuery UI example http://jqueryui.com/demos/autocomplete/#default

$('input#id_location_address').keyup( function() {
    $("input#id_location_address").autocomplete({
        source: function(request, response) {
            $.ajax({
                    url: "/concierge/autocomplete/locations/",
                    dataType: "json",
                    data: request,
                    success: function( data ) {
                        // loop through data and return as array
                        items = new Array();
                        for(item in data) items.push( data[item].fields.address );
                        response( items );
                    }
            });
        }
    });
});