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

Question

各位程序员大家好，

我有一个包含一些数据的数据库。我创建了一个 WCF 服务，该服务使用 jQuery 自动完成功能从数据库中获取所有名称。我收到 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 回调函数的数组采用以下格式之一：

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

所以在你的情况下你可以：

编辑 returns JSON 的服务器端代码以符合小部件期望的格式，或者
在将结果传递给 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 属性的值将在您 select 一个项目后在文本框内使用——这可能不是您想要的。

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

Display data with jQuery autocomplete with WCF Service?

c#

jquery

jquery-ui

autocomplete

jquery-ui-autocomplete