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

Question

我在使用 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 手动访问控制器 我得到了结果。 我直接从 google CDN 使用 jQuery 和 jQUI 的 newset 版本。

Answer 1

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

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

因此，您有两个选择：

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

   公共类TagView
   {
       公共字符串标签{获取;放; }
       公共字符串值{获取;放; }
   }
   

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

   $("#Editor_Tags").autocomplete({
       来源：函数（请求，响应）{
           $.getJSON("/Forums/Ajax/GetTags", { term: request.term }, 函数 (数据) {
               响应（$.map（数据，函数（el）{
                   返回 {
                       标签：el.TagName，
                       值：el.TagId
                   };
               }));
           });
       },
       /* 其他自动完成选项 */
   });
   

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

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

Answer 2

我已经让它与这段代码一起工作：

    $('#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
                    }
                }));
            }
        });
    }

});

本质上与安德鲁发布的内容没有什么不同。