jQuery autocomplete remote JSON datasource not returning data

Question

I've been working forever on this, and searched through all the other examples and still can't seem to figure it out, trying to use jquery ui autocomplete, first time trying to put this all together. Here is my JS:

$(document).ready(function () {
$("#search-title").autocomplete({
    source: function ( request, response ) {
        $.ajax({
            url: "/include/autocomplete",
            dataType: "json",
            data: {
                        term: request.term      
                    },
            success: function (data) {
                response( $.map( data.stuff, function ( item ) {
                    return {
                        label: item.name,
                        value: item.name
                    };
                }));
            }
        });
    },
    minLength: 2,
    focus: function (event, ui) {
        $(event.target).val(ui.item.label);
        return false;
    },
    select: function (event, ui) {
        $(event.target).val(ui.item.label);
        window.location = ui.item.value;
        return false;
    }
});
});

Checking out the Response in Firebug, I think I'm getting properly formatted JSON here:

{"stuff":[ {"label" : "Dragon", "value" : "http://site.com/animal/firebreathers"}] }

But for some reason it's not hooking up. After I hit the minLength a small, empty box will open beneath the search field but nothing will be in there.

UPDATE: When I add "alert(item);" in the response call, I get a window that says "The page at site.com says: object Object" -- could this be the issue?

Answer 1

I finally figured it out, thanks to that hint comment under my question.

In the return, which I copied from the Jquery UI site, i had:

label: item.name,
value: item.name

Changing that to:

label: item.label,
value: item.value

Solved my struggle with jQuery. I have no idea if this is good practice, but it finally works!