jQuery AutoComplete - Retourne plusieurs valeurs

Question

J'utilise jQuery AutoComplete, et j'ai une boîte de recherche auto-complétée pour rechercher des utilisateurs.

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

Comme vous pouvez le voir, il renvoie uniquement le nom d'utilisateur. J'aimerais également retourner l'ID utilisateur de l'utilisateur. Les résultats afficheront toujours seulement une liste de noms d'utilisateur, mais quand quelqu'un sélectionne un utilisateur, je voudrais stocker le userid pour cet utilisateur dans une valeur cachée de sorte que je puisse faire tout ce dont j'ai besoin avec lui. Je vais lancer une requête sur l'utilisateur sélectionné, et je préfère chercher l'utilisateur par UserID que par nom d'utilisateur.

Existe-t-il un moyen de le faire?

Answer 1

Je créer une classe qui contient les valeurs que vous souhaitez renvoyer. Créez ensuite une nouvelle instance de cette classe avec les valeurs et sérialisez la réponse à l'aide de JSON.

Cela devrait être suffisant pour vous diriger dans la bonne direction.

EDIT: Voici comment je le fais.

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

Voici comment je configure la saisie semi-automatique avec la classe personnalisée retournée. Ma classe renvoyée a la structure suivante:

{ Id: int, DisplayName: string } 

Notez également la fonction de sélection. Cela stocke une référence interne à l'élément de données qui a été renvoyé. Donc, quand j'ai besoin de soumettre cette information, je peux juste regarder le selectedItemData et utiliser toutes les propriétés de la classe à ce moment-là aussi. J'espere que cela aide un peu plus.

Mais la partie pour vous de travailler avec serait dans la méthode de succès où j'assigne l'objet à l'élément.