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

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/