JQueryAutoComplete Not showing results

Question

I am trying to bind the text box and the JQuery AutoComplete feature. When I checked the Firebug AJAX Request & Response it returns like the following. But the textbox is not showing any items. Could you please advise me, what I am doing wrong? Thanks.

Here is my coding:

$("#<%= TextBox1.ClientID %>").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "/contractors/web_services/wsSM.asmx/SearchDrugs",
                    type: "POST",
                    dataType: "json",
                    data: {
                        'LocationID': "10543",
                        'Search': request.term
                    },
                    success: function (data) {                        
                        response($.map(data.d, function (item) {

                            return {
                                value: item.FullDrugName,
                                id: item.DrugID
                            }
                        }))
                    }
                });
            },
            delay: 1,
            minLength: 2,
            select: function (event, ui) {
                alert(ui.item.id);
            }
        });

Answer 1

DataType property is representing the type of data that you're expecting back from the server. you define data type as json but server returns you a xml output. You should change your DataType property to xml

Answer 2

In addition to @fealin's answer, you're going to need to change the way you process the xml response. It doesn't look like you have a d property on the return data, and you also need to look for the correct nodes in the XML structure and pull out their text to build the response array that you return to the widget.

Based on the XML you've provided, it might look something like this:

$("#<%= TextBox1.ClientID %>").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "/contractors/web_services/wsSM.asmx/SearchDrugs",
            type: "POST",
            dataType: "json",
            data: {
                'LocationID': "10543",
                'Search': request.term
            },
            success: function (data) {                        
                response($(data).find("Drug").map(function (_, el) {
                    var $el = $(el);
                    return {
                        label: $el.find("FullDrugName").text(),
                        value: $el.find("DrugID").text()
                    };
            }));
        });
    },
    delay: 1,
    minLength: 2,
    select: function (event, ui) {
        alert(ui.item.id);
    }
});

Here's an example that's just using the XML string (without an AJAX request): http://jsfiddle.net/J5rVP/29/