jQuery AutoComplete (jQuery UI 1.8rc3) with ASP.NET web service

Currently, I have this version of the autocomplete control working when returning XML from a .ashx handler. The xml looks like this:

<?xml version="1.0" encoding="UTF-8" standalone="no" ?> 
<States>
<State>
  <Code>CA</Code> 
  <Name>California</Name> 
</State>
<State>
  <Code>NC</Code> 
  <Name>North Carolina</Name> 
</State>
<State>
  <Code>SC</Code> 
  <Name>South Carolina</Name> 
</State>

The autocomplete code looks like this:

    $('.autocompleteTest').autocomplete(
    {
        source: function(request, response) {
            var list = [];
            $.ajax({
                url: "http://commonservices.qa.kirkland.com/StateLookup.ashx",
                dataType: "xml",
                async: false,
                data: request,
                success: function(xmlResponse) {
                    list = $("State", xmlResponse).map(function() {
                        return {
                            value: $("Code", this).text(),
                            label: $("Name", this).text()
                        };
                    }).get();
                }
            });
            response(list);
        },
        focus: function(event, ui) {
            $('.autocompleteTest').val(ui.item.label);
            return false;
        },
        select: function(event, ui) {
            $('.autocompleteTest').val(ui.item.label);
            $('.autocompleteValue').val(ui.item.value);
            return false;
        }

    });

For various reasons, I’d rather be calling an ASP.NET web service, but I can’t get it to work. To change over to the service (I’m doing a local service to keep it simple), the start of the autocomplete code is:

    $('.autocompleteTest').autocomplete(
    {
        source: function(request, response) {
            var list = [];
            $.ajax({
                url: "/Services/GeneralLookup.asmx/StateList",
                dataType: "xml",

This code is on a page at the root of the site and the GeneralLookup.asmx is in a subfolder named Services. But a breakpoint in the web service never gets hit, and no autocomplete list is generated. In case it makes a difference, the XML that comes from the asmx is:

<?xml version="1.0" encoding="utf-8" ?> 
<string xmlns="http://www.kirkland.com/"><State> <Code>CA</Code> <Name>California</Name> </State> <State> <Code>NC</Code> <Name>North Carolina</Name> </State> <State> <Code>SC</Code> <Name>South Carolina</Name> </State></string>

Functionally equivalent since I never use the name of the root node in the mapping code. I haven’t seen anything in the jQuery docs about calling a .asmx service from this control, but a .ajax call is a .ajax call, right?

I’ve tried various different paths to the .asmx (~/Services/), and I’ve even moved the service to be in the same path to eliminate these issues. No luck with either.

Any ideas?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

I got the autocomplete to work with .asmx by using JSON. Here is an example of what I did:

JavaScript:

$("#tbNameFilter").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "/Services/AutocompleteService.asmx/Aoi_Autocomplete",
            data: "{ 'q': '" + request.term + "', 'limit': '10' }",
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataFilter: function (data) { return data; },
            success: function (data) {
                response($.map(data.d, function (item) {
                    return {
                        label: item.Name,
                        value: item.Name
                    }
                }))
            }
        });
    },
    minLength: 1
});

Web Service:

[WebMethod]
public List<FAD_Aoi> Aoi_Autocomplete(String q, int limit)

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0