如何从C#Controller Action为jQuery AutoComplete返回Json标签/值对

Question

我需要创建一个jQuery Autocomplete文本框,从文件夹中获取名称列表,选中后,将用户发送到相应的页面链接.

我正在尝试做这样的事情:从jQuery自动完成选择中激活控制器动作

解决方案是有道理的,点击和重定向工作,但我不知道如何返回更多的名称字符串列表.

当前控制器代码(片段):

        List<string> Names = new List<string>();
        foreach (Child c in listfromDB)
        {
            Names.Add(c.Name);
            //childNames.Add(new KeyValuePair<string, int>(c.Name, c.ID));
        }
        return Json(Names);

本KeyValuePair似乎没有工作.如何创建对象数组呢？

我的jQuery代码:

$(document).ready(function () {
$("#find-child-box").autocomplete({
source: function (request, response) {
    // define a function to call your Action (assuming UserController)
    $.ajax({
        url: '/Admin/AutoCompleteMyChildren', type: "POST", dataType: "json",

        // query will be the param used by your action method
        data: { query: request.term },
        success: function (data) {
            response($.map(data, function (item) {
                return { label: item, value: item };
            }))
        }
    })
},
minLength: 1, // require at least one character from the user
select: function(event, ui) {
alert('mom');
    window.location.href = ui.item.value;
}
}); 
});

Answer 1

实际上,自动完成工作正常,只返回一个字符串数组.这应该可以正常工作,而无需修改控制器操作:

JavaScript的:

$(document).ready(function () {
    $("#find-child-box").autocomplete({
        source: function (request, response) {
            // define a function to call your Action (assuming UserController)
            $.ajax({
                url: '/Admin/AutoCompleteMyChildren', 
                type: "POST", 
                dataType: "json",
                // query will be the param used by your action method
                data: { query: request.term },
                success: response
            });
        },
        minLength: 1, // require at least one character from the user
        select: function(event, ui) {
            alert(ui.item.ID);
            window.location.href = ui.item.value;
        }
    }); 
});

检查jQueryUI自动完成的概述选项卡,以查看窗口小部件所期望的数据类型.

根据你的评论:

正如@Alex提示你必须更改控制器操作的数据.您可以使用以下内容创建正确的对象数组:

return Json(listfromDB.Select(c => new { label = c.Name, ID = c.ID }));

哪个应生成JSON,如下所示:

[{ label: 'Scott', ID: '1234' }, ...]

哪种自动填充功能可以正确使用.然后,ui.item在autocomplete的事件处理程序(select例如)中随时可用,您应该能够访问ui.item.ID.