jquery autocomplete with ajax source does not retrieve results

Question

I have the following autocomplete that pulls from my ajax data source:

$("#id_q").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "/search/autocomplete/",
            dataType: "jsonp",
            data: {
                q: request.term
            },
            success: function (data) {
                alert(data);
                response(data);
            }
        });
    },
    minLength: 3,
    select: function (event, ui) {
        log(ui.item ?
            "Selected: " + ui.item.label :
            "Nothing selected, input was " + this.value);
    },
    open: function () {
        $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
    },
    close: function () {
        $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
    }
});

Server side I can see that results are being returned correctly and look like:

{"results": ["BEEF", "BEEFARONI", "BEEFARONI", "BEEF", "BEET"]}

The success method never fires the alert.

Also should I rename request.term?

What am I doing wrong and where can I print the data I am returning to figure out what is going on?

Answer 1

Do you pass data to source method? Is your url correct? I think yours is wrong, try writing the whole URL or use a REST client to check it.

Answer 2

Thanks for the hint @Andrew Whitaker . I removed the entire dataType line and it worked.