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?

Isn't item an object? Have you tried accessing parameters in item such as item.value? — Travis J
– Travis J, Commented Dec 25, 2011 at 21:59

Jim Hull · Accepted Answer · 2011-12-26 06:02:25Z

2

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!

answered Dec 26, 2011 at 6:02

Jim Hull

1531 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Deept Raghav · Accepted Answer · 2011-12-25 21:35:09Z

0

try using jsonp instead of json in datatype.

answered Dec 25, 2011 at 21:35

Deept Raghav

1,47013 silver badges14 bronze badges

Collectives™ on Stack Overflow

jQuery autocomplete remote JSON datasource not returning data

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related