jQuery AutoComplete - 返回多个值

Question

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

Default.aspx

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

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

</script>

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

UsersAutoComplete.ashx

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; }
    }
}

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

结果仍将仅显示用户名列表，但当有人选择用户时，我想将该用户的用户 ID 存储在一个隐藏值中，以便我可以用它做任何我需要做的事情。我将对选定的用户运行查询，我宁愿通过 UserID 而不是通过用户名来查找用户。

有没有办法做到这一点？

Answer 1

我将创建一个包含您想要返回的值的类。然后使用值创建该类的新实例并使用 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;
        }
    });

这就是我使用返回的自定义类设置自动完成的方式。我返回的类具有以下结构：

{ Id: int, DisplayName: string }

还要注意选择功能。它存储对返回的数据项的内部引用。因此，当我需要提交该信息时，我可以只查看 selectedItemData 并使用该类的所有属性。

我希望这会有所帮助。但是你要处理的部分是在我将对象分配给项目的成功方法中。