7

我需要创建一个 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;
}
}); 
});
4

2 回答 2

7

实际上，自动完成功能适用于只返回字符串数组的源。这对您来说应该可以正常工作，而无需修改您的控制器操作：

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在自动完成的事件处理程序（select例如）中的任何时间都可用，您应该能够访问ui.item.ID.

于 2012-09-28T02:22:37.890 回答
1

尝试创建存储您的 Child 类型的列表

List<Child> children = new List<Child>();

 foreach (Child c in listfromDB)
{

      children.Add(c);

}

 return Json(children);

您可能需要修改您的最终代码，因为 Json 会有所不同。

如果您不希望从 DB 获得 Child 的所有属性，请创建一个自定义类并添加您想要的内容。

class CustomChild{

   public string Name {get; set;}
   public int ID { get; set ;}


}

List<CustomChild> children = new List<CustomChild>();

 foreach (Child c in listfromDB)
{

      children.Add(new CustomChild{ Name = c.Name, ID = c.ID} );

}

您可能需要修改语法以使其正常工作或添加一些参考。我鼓励您研究 LINQ。

于 2012-09-27T23:12:18.727 回答