C# jQuery自动完成-返回多个值

我正在使用jQuery自动完成，我有一个自动完成搜索框来搜索用户

Default.aspx

<script type="text/javascript" language="javascript">

    $(document).ready(function() {
        $("#<%= txtUser.ClientID %>").autocomplete('UsersAutoComplete.ashx');
    });

</script>

<asp:TextBox ID="txtUser" runat="server" />

public class UsersAutoComplete : IHttpHandler
{    
    public void ProcessRequest (HttpContext context)
    {
        List<User> users = DataContext.Users
            .Where(u => u.Username.StartsWith(context.Request.QueryString["q"]))
            .Take(Int32.Parse(context.Request.QueryString["limit"]))
            .OrderBy(u => u.Username)
            .ToList();

        foreach (User user in users)
        {
            context.Response.Write(user.Username + Environment.NewLine);
        }
    }

    public bool IsReusable
    {
        get { return false; }
    }
}

$（文档）.ready（函数（）{
$（“#”）自动完成（'usersautomplete.ashx'）；
});

用户sautocomplete.ashx

<script type="text/javascript" language="javascript">

    $(document).ready(function() {
        $("#<%= txtUser.ClientID %>").autocomplete('UsersAutoComplete.ashx');
    });

</script>

<asp:TextBox ID="txtUser" runat="server" />

public class UsersAutoComplete : IHttpHandler
{    
    public void ProcessRequest (HttpContext context)
    {
        List<User> users = DataContext.Users
            .Where(u => u.Username.StartsWith(context.Request.QueryString["q"]))
            .Take(Int32.Parse(context.Request.QueryString["limit"]))
            .OrderBy(u => u.Username)
            .ToList();

        foreach (User user in users)
        {
            context.Response.Write(user.Username + Environment.NewLine);
        }
    }

    public bool IsReusable
    {
        get { return false; }
    }
}

公共类用户sautomplete:IHttpHandler
{    
公共void ProcessRequest（HttpContext上下文）
{
List users=DataContext.users
.Where（u=>u.Username.StartsWith（context.Request.QueryString[“q”]））
.Take（Int32.Parse（context.Request.QueryString[“limit”]））
.OrderBy（u=>u.Username）
.ToList（）；
foreach（用户中的用户）
{
context.Response.Write（user.Username+Environment.NewLine）；
}
}
公共布尔可重用
{
获取{return false；}
}
}

如您所见，它只返回用户名。我还想返回用户的UserID

结果仍然只会显示用户名列表，但当有人选择一个用户时，我希望将该用户的用户名存储在一个隐藏值中，以便我可以对其执行任何需要的操作。我将对所选用户运行一个查询，我宁愿按UserID而不是用户名查找用户

---

有没有办法做到这一点？

我将创建一个类，其中包含您希望返回的值。然后使用这些值创建该类的新实例，并使用JSON序列化响应

这应该足以让你找到正确的方向

编辑：我是这样做的

$("#<%= txtUser.ClientID %>").autocomplete(
    {
        source: function (request, response) {
            $.ajax(
            {
                url: autocompleteSourceUrl,
                dataType: "json",
                type: "POST",
                data: { LookupPrefix: request.term, TotalResults: 10 },
                success: function (data) {
                    response($.map(data.LookupItems,
                        function (item) {
                            var itemLabel = item.DisplayName;

                            if (itemLabel.length > 37)
                                itemLabel = itemLabel.substring(0, 37) + "...";

                            return { label: itemLabel, value: item.DisplayName, data: item }
                        }))
                }
            });
        },
        minLength: 3,
        select: function (event, ui) {
            selectedItemData = ui.item.data;
        }
    });

请注意select函数。它存储对返回的数据项的内部引用。因此，当我需要提交这些信息时，我只需查看selectedItemData，并使用当时类的所有属性

---

我希望这能多帮点忙。但是您要使用的部分是success方法，在这里我将对象分配给项。

我将创建一个包含您想要返回的值的类。然后使用这些值创建该类的新实例，并使用JSON序列化响应

这应该足以让你找到正确的方向

编辑：我是这样做的

$("#<%= txtUser.ClientID %>").autocomplete(
    {
        source: function (request, response) {
            $.ajax(
            {
                url: autocompleteSourceUrl,
                dataType: "json",
                type: "POST",
                data: { LookupPrefix: request.term, TotalResults: 10 },
                success: function (data) {
                    response($.map(data.LookupItems,
                        function (item) {
                            var itemLabel = item.DisplayName;

                            if (itemLabel.length > 37)
                                itemLabel = itemLabel.substring(0, 37) + "...";

                            return { label: itemLabel, value: item.DisplayName, data: item }
                        }))
                }
            });
        },
        minLength: 3,
        select: function (event, ui) {
            selectedItemData = ui.item.data;
        }
    });

请注意select函数。它存储对返回的数据项的内部引用。因此，当我需要提交这些信息时，我只需查看selectedItemData，并使用当时类的所有属性

---

我希望这能多帮点忙。但是您需要使用的部分是成功方法，我将对象分配给项目。

谢谢，这让我成功了一半。但是结果中每个用户的UserID存储在哪里？作为每一个李的班级？我如何存储它呢？您可以创建一个具有用户名和userid属性的类。然后将序列化的类返回到自动完成代码。它将序列化它。您可以告诉autocomplete返回的数据是JSON。然后像平常一样使用属性。让我举个例子，我可以处理返回一个JSON结果，我的困惑是在我得到数据后前端应该做什么。我需要一种方法将结果中的每一项与用户ID关联起来，但我不确定如何关联。谢谢，这让我成功了一半。但是结果中每个用户的UserID存储在哪里？作为每一个李的班级？我如何存储它呢？您可以创建一个具有用户名和userid属性的类。然后将序列化的类返回到自动完成代码。它将序列化它。您可以告诉autocomplete返回的数据是JSON。然后像平常一样使用属性。让我举个例子，我可以处理返回一个JSON结果，我的困惑是在我得到数据后前端应该做什么。我需要一种方法将结果中的每个项目与用户ID关联起来，但我不确定如何关联。