How to pass JSON data to WCF method when setting source for jquery autocomplete

Question

I saw bunch of similar posts on stackoverflow, but neither worked for me. I have simple AJAX ENABLED WCF service, which returns cities based on input

 [OperationContract]
    public IEnumerable<string> GetCities(string prefix)
    {
        string[] cities = new[] { "New York", "Atlanta", "Los Angeles", "Las Vegas", "Arizona", "New Hampshire", "New England" };

        if(!String.IsNullOrEmpty(prefix))
        {
            cities = cities.Where(a => a.ToLower().StartsWith(prefix.ToLower())).ToArray();
        }

        return cities;
    }

Now I'm trying to make a call to this method using jquery ui's autocomplete. The problem is I have to pass prefix parameter to the method call, but whatever I'm trying the prefix parameter gets appended to url as a query string. Here's the jQuery code that I have

$("input[type=text][id*=autocompleteBox]").autocomplete({
    source: function (request, response) {
        var dataCity = {'prefix': request.term};
        $.ajax({
            url: "http://localhost:1939/Cities.svc/GetCities",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(dataCity),
            success: function (data) {
                response($.map(data, function (item) {
                    return {
                        label: data
                    }
                }));
            }
        });
    },
    minLength: 0
});

I know I have 3 options to call remote datasource. First option is the code above, but this way I have stringified json result appended to url.

Then I tried to simply pass url of service to source option, but I got the same result ( term=myinput appended to url ).

I can't use 3rd option ( an array with local data ) as I have many entries, I don't want to keep them all on the client.

So how can I pass prefix parameter to Service Method ? Is this possible, or I have to stuck with url appended parameters if I choose to use jquery ui's autocomplete widget ?

Ladislav Mrnka · Accepted Answer · 2012-04-12 10:31:09Z

2

I don't see HTTP method specified in your ajax call (type parameter) so it defaults to GET and GET cannot have content. The only way to pass data when GET is used is through URL parameters. Btw. because you method just gets data, it should use GET request.

So instead of JSON, send just:

var dataCity = "prefix=" +  encodeURIComponent(request.term);

answered Apr 12, 2012 at 10:31

Ladislav Mrnka

365k60 gold badges666 silver badges673 bronze badges

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

2 Comments

Michael Over a year ago

Hi thanks for quick response, I can't agree with the notion that I should use GET request to get data back. Actually I made some errors in the code, in particular I should map data.d as instead of data. I'll post complete code as an answer.

Michael Over a year ago

Sry forgot to mention, thanks for pointing out that I didn't specified type parameter.

Michael · Accepted Answer · 2012-04-12 19:07:28Z

Actually, I made some mistakes in the code. I should map returned result, which in this case is data.d. Here's the working code.

$("input[type=text][id*=autocompleteBox]").autocomplete({

        source: function (request, response) {

            var data = { 'prefix': request.term};

            $.ajax({
                type: "POST",
                url: "http://localhost:1939/Cities.svc/GetCities",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: JSON.stringify(data),
                processdata: true,
                success: function (result) {
                    response($.map(result.d, function (item) {
                        return {
                            label: item
                        };
                    }));
                },
                error: function (er) {
                    alert(er);
                }
            });
        },
        minLength: 1,
        open: function () {
            $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
        },
        close: function () {
            $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
        }
    });

Collectives™ on Stack Overflow

How to pass JSON data to WCF method when setting source for jquery autocomplete

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related