jquery autocomplete throws --> "parsererror", SyntaxError: invalid label

Question

Following the official example for autocomplete, I came up with this.

$("#search").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "/search",
                    dataType: "jsonp",
                    data: {
                        featureClass: "P",
                        style: "full",
                        maxRows: 12,
                        name_startsWith: request.term
                    },
                    success: function (data) {
                        response($.map(data.username, function (item) {
                            return {
                                label: item.name,
                                value: item.name
                            };
                        }));
                    },
                    error: function (data) {

                    }
                });
            },
            minLength: 2,
            select: function (event, ui) {

            },

        });

However I never hit the success: function (data) { .. } but always the error: function (data) {.

Firebug shows the error: "parsererror", SyntaxError: invalid label

The /search url produces this on the server side:

def search():
    data = None
    if 'name_startsWith' in request.args:
        q = request.args['name_startsWith']
        data = User.query(ndb.AND(User.firstname >= q, User.firstname <= q + u'\ufffd')).fetch(12)
        js = []
        for user in data:
            js.append({'name' : user.fullname()})         
    return jsonify(username=js)

Any suggestions please?

Answer 1

change the datatype to json because your response is a json object and the request is sent to the same domain so there is no need for jsonp

$("#search").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "/search",
                    dataType: "json",
                    data: {
                        featureClass: "P",
                        style: "full",
                        maxRows: 12,
                        name_startsWith: request.term
                    },
                    success: function (data) {
                        response($.map(data.username, function (item) {
                            return {
                                label: item.name,
                                value: item.name
                            };
                        }));
                    },
                    error: function (data) {

                    }
                });
            },
            minLength: 2,
            select: function (event, ui) {

            },

        });

Demo: Error Demo: Solution