jQueryUI + ASP .NET MVC 使用 json 数据自动完成答案

【问题标题】：jQueryUI + ASP .NET MVC autocomplete with json datajQueryUI + ASP .NET MVC 使用 json 数据自动完成
【发布时间】：2011-09-27 06:34:21
【问题描述】：

我在使用 jQueryUI 自动完成调用 JSON 时遇到了很大的问题。我有这个相当简单的 JS：

$(document).ready(function() {
    $('#Editor_Tags').autocomplete({
        source: "/Forums/Ajax/GetTags",
        focus: function () {
            // prevent value inserted on focus
            return false;
        },
        select: function (event, ui) {
            var terms = split(this.value);
            // remove the current input
            terms.pop();
            // add the selected item
            terms.push(ui.TagName);
            // add placeholder to get the comma-and-space at the end
            terms.push("");
            this.value = terms.join(", ");
            return false;
        }
    });
});

这是我想要返回的模型：

public class TagView
{
    public int TagId { get; set; }
    public string TagName { get; set; }
    public int Weight { get; set; }
}

但这不是主要问题。主要问题是，当我开始输入时，jQuery 不会向控制器发出请求。我 100% 确定，指定的 Url 是好的。因为我可以通过键入 /Forums/Ajax/GetTags?term=text 手动访问控制器我得到了它的结果。我正在使用 jQuery 和 jQUI 的 newset 版本直接 rom google CDN。

【问题讨论】：

@Lukasz Baran：您在页面上看到任何 JavaScript 错误吗？当您在 Firebug 中打开 console 选项卡时会发生什么？是否有任何请求被发送？
在 firebug 控制台中，它看起来很好，并请求检索数据，但另一方面在 Fiddler 中我没有得到任何 ajax 调用结果。

标签： asp.net-mvc jquery-ui autocomplete getjson jquery-ui-autocomplete

【解决方案1】：

我已经使用此代码：

    $('#Editor_Tags').autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "/Forums/Ajax/GetTags",
            dataType: "json",
            data: {
                term: request.term
            },
            success: function (data) {
                response($.map(data, function (item) {
                    return {
                        label: item.TagName,
                        value: item.TagName
                    }
                }));
            }
        });
    }

});

这与 Andrew 发布的内容本质上没有什么不同。

【讨论】：

【解决方案2】：

jQueryUI 自动完成小部件希望source 参数中的数据满足以下要求：

[..] 一个简单的字符串数组，或者它包含对象中的每个项目数组，带有标签或值财产或两者兼而有之。

所以你有两个选择：

将您要序列化的视图模型更改为 JSON 以满足这些要求：

public class TagView
{
    public string Label { get; set; }
    public string Value { get; set; }
}

将自动完成小部件的 source 参数更改为您自己执行 AJAX 调用并适当格式化数据的函数：

$("#Editor_Tags").autocomplete({
    source: function (request, response) {
        $.getJSON("/Forums/Ajax/GetTags", { term: request.term }, function (data) {
            response($.map(data, function (el) {
                return {
                    label: el.TagName,
                    value: el.TagId
                };
            }));
        });
    },
    /* other autocomplete options */
});

这是假设从服务器返回的数据是一个 TagView 对象的 JSON 数组。

第二段代码未经测试，但它至少应该让你朝着正确的方向前进。

【讨论】：