jQuery AutoComplete - Return multiple values

Question

I'm using jQuery AutoComplete, and I have an auto-complete search box to search for users.

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

As you can see, it only returns the Username. I'd also like to return the user's UserID as well.

The results will still only show a list of Usernames, but when someone selects a user, I'd like to store the UserID for that user in a hidden value so that I can do whatever I need to with it. I'll be running a query on the selected user, and I'd rather lookup the user by UserID than by Username.

Is there a way to do this?

Answer 1

I would create a class that contains the values you want returned. Then create a new instance of that class with the values and serialize the response using JSON.

That should be enough to get you pointed in the right direction.

EDIT: Here is how I do it.

$("#<%= 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;
        }
    });

This is how I setup the autocomplete with the custom class returned. My class being returned has the following structure:

{ Id: int, DisplayName: string }

Notice also the select function. That stores an internal reference to the data item that was returned. So when I need to submit that info I can just look at the selectedItemData and use all the properties of the class at that time as well.

I hope this helps a little more. But the part for you to work with would be in the success method where I assign the object to the item.