使用 WCF 服务使用 jQuery 自动完成显示数据？

Question

各位程序员们好，

我有一个包含一些数据的数据库。我创建了一个 WCF 服务，它使用 jQuery Autocomplete 从数据库中获取所有名称。我得到 JSON 的响应，但我想在自动完成中显示它。

这是我的 jQuery 的样子：

$(function () {
    function log(message) {
        $("<div>").text(message).prependTo("#log");
        $("#log").scrollTop(0);
    }
    $("#city").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/service.svc/GetData",
                dataType: "jsonp",
                data: {
                    DataName: request.term
                },
                success: function (data) {
                    response(data);
                }
            });
        },
        minLength: 3,
        select: function (event, ui) {
            log(ui.item ?
            "Selected: " + ui.item.label :
            "Nothing selected, input was " + this.value);
        },
        open: function () {
            $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
        },
        close: function () {
            $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
        }
    });
});

我对 WCF 还很陌生，想知道下一步是什么？如何映射数据以便显示？

JSON 数据输出如下所示：

{"GetDataResult":[{"Name":"Fran $","CategoryId":102,"dataId":1,"IndexId":16,"InsertedDate":null,"Manual":false}

Answer 1

自动完成小部件要求您提供给response 回调函数的数组采用以下格式之一：

1. 字符串数组，例如["Hello", "Goodbye"]
2. 对象数组。每个对象必须至少具有label 属性或value 属性。它也可能具有其他属性。

所以在您的情况下，您可以：

1. 编辑返回 JSON 的服务器端代码以符合小部件期望的格式，或者
2. 在将结果传递给response 回调之前修改结果。

我将专注于 #2。执行此操作的规范方法是使用 $.map 将您从服务器返回的数组转换为正确的格式，然后将生成的数组提供给 response 回调。

在您的情况下，可能看起来像这样：

success: function (data) {
    response($.map(data.GetDataResult, function (item) {
        return {
            label: item.Name,
            value: item.dataId
        };
    }));
}

示例：http://jsfiddle.net/yntrp063/

请注意，value 属性的值将在您选择项目后在文本框内使用——这可能不是您想要的。