jquery ui autocomplete with ajax data source

Question

I'm trying to use the jquery ui autocomplete feature with an ajax datasource and I just can't see what is wrong with my code.

Here is my code

$(document).ready(function () {

        var data = new Portalen.LitteraNumberData();

        $("#LitteraNumber").autocomplete({
            minLength: 1,
            source : function (request, response) {
                var customerId = $("#CustomerId").val();
                return response(data.loadLitteraNumbers(customerId));
            }
        });
    });

and in a js file I have this:

Portalen.LitteraNumberData = function () { };

Portalen.LitteraNumberData.prototype = function() {

var loadLitteraNumbers = function(customerId) {
    $.get("/Orders/GetLitteraNumbers", { customerId: customerId }, function (response) {
        return response;
    });
};

return {
    loadLitteraNumbers: loadLitteraNumbers
};
}();

The ajax call is working, I get the correct response but the autocomplete feature just wont happen. Is LitteraNumberData returning the wrong thing? All suggestions are appreciated.

Maxbester · Accepted Answer · 2012-10-18 15:43:59Z

3

Try this:

$(document).ready(function () {
    var data = new Portalen.LitteraNumberData();
    $("#LitteraNumber").autocomplete({
        minLength: 1,
        source : function (request, response) {
            $.get("/Orders/GetLitteraNumbers", { customerId: request.term }, function (data) {
                response(data);
            });
        }
    });
});

I've replaced $("#CustomerId").val() by request.term. Moreover, the function does not need to return the response.

The $.get function is asynchronous so you cannot put it elsewhere.

answered Oct 18, 2012 at 15:43

Maxbester

2,5318 gold badges42 silver badges73 bronze badges

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

3 Comments

Pelle Over a year ago

Thanks for your answer, I was really hoping to be able to encapsulate the scripts in js files and make them some what reusable in other places. I would really like to know why my approach isn't working.

Maxbester Over a year ago

Your approach isn't working because $.get is asynchronous. loadLitteraNumbers() finishes before $.get returns a result. I think this is the point.

KingRider Over a year ago

What a version autocomplete with jquery ui? Uncaught ReferenceError: Portalen is not defined

Collectives™ on Stack Overflow

jquery ui autocomplete with ajax data source

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related