javascript - 具有自定义格式的 C# Webservice json 数据 jquery ui

Question

我正在使用 asp.net webservice 在 jQuery UI 自动完成插件中使用它，这是我得到的数据。

{"d":[
    {
        "__type":"WebS.Model.SearchModel",
        "MainCommodityId":1,
        "MainCommodityName":"Pulses",
        "SubcommodityId":3,
        "SubCommodityName":"Urid Dal",
        "BrandId":3,
        "BrandName":"President"
    },
    {
        "__type":"WebS.Model.SearchModel",
        "MainCommodityId":1,
        "MainCommodityName":"Pulses",
        "SubcommodityId":1,
        "SubCommodityName":"Red Gram",
        "BrandId":4,
        "BrandName":"President"
    }
    ]
}

这是我正在使用的脚本:

$(document).ready(function () {
    $(".input-search").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '/WebServices/GetAllBrandNames.asmx/getAllBrands',
                data: "{ 'data': '" + request.term + "'}",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    response($.map(data.d, function (item) {
                        return {
                            value: item.BrandName,
                            label: item.SubCommodityName
                        }
                    }))
                },
                error: function (response) {
                    alert('error');
                },
                failure: function (response) {
                    alert('faii');
                }
            });
        },
        select: function (e, i) {
            console.log(i.MainCommodityId);
            console.log(i.SubcommodityId);
            console.log(i.BrandId);
        },
        minLength: 1
    }).autocomplete("instance")._renderItem = function (ul, item) {
        return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<a>" + "" + item.BrandName + " in " + item.MainCommodityName + " - " + item.SubCommodityName + "</a>")
            .appendTo(ul);
    };
});

问题是:

1. 当我尝试输入关键字时说:pre 上述输出以 json 格式出现。但是，该列表只返回一个“总统”项目，而它应该显示 2 个项目。
2. 添加 .autocomplete("instance")._renderItem 函数后，列表显示“undefined in undefined - undefined”而不是值。
3. console.log 在选择一个项目后也是未定义的。

如何解决这些问题？

Answer 1

选择事件的默认行为是用 ui.item.value 更新输入。此代码在您的事件处理程序之后运行。

使用 event.preventDefault() 或通过 return false 简单地阻止 select 和 focus 上的默认操作并使用 _renderItem 进行自定义下拉。

focus: function(event, ui) {
   // prevent autocomplete from updating the textbox
   event.preventDefault(); // or return false;
}

select: function(event, ui) {
   // prevent autocomplete from updating the textbox
   event.preventDefault(); 
   //do something
}

引用资料:

1. jQuery UI Autocomplete Examples
2. Example 2