JQuery AutoComplete不显示结果

时间:2012-12-27 15:41:41

标签: jquery-ui autocomplete jquery-ui-autocomplete

我正在尝试绑定文本框和JQuery AutoComplete功能。当我查看Firebug AJAX请求&响应它返回如下。但文本框没有显示任何项目。你能告诉我,我做错了什么吗?感谢。

enter image description here 这是我的编码:

$("#<%= 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);
            }
        });

2 个答案:

答案 0 :(得分:1)

DataType属性表示您期望从服务器返回的数据类型。 您将数据类型定义为json,但服务器返回xml输出。您应该将DataType属性更改为xml

答案 1 :(得分:0)

除了@fealin's answer之外,您还需要更改处理xml响应的方式。看起来你的返回数据上没有d属性,你还需要在XML结构中查找正确的节点并拉出它们的文本来构建返回到窗口小部件的响应数组

根据您提供的XML,它可能如下所示:

$("#<%= 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);
    }
});

这是一个仅使用XML字符串(没有AJAX请求)的示例:http://jsfiddle.net/J5rVP/29/