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回调函数的数组采用以下格式之一：

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

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

编辑返回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属性的值将在文本框内使用 - 可能不是您想要的。

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

1 个答案: