JQuery UI autocomplete pour plusieurs sélections de clé/valeur dans ASP.NET

Question

Comment gérer la sélection de plusieurs éléments avec la saisie semi-automatique? Les objets que je renvoie de mon service Web JSON contiennent un ID et une étiquette - l'ID est l'ID de l'entité dans la base de données et l'étiquette est du texte à afficher pour l'utilisateur.

À l'heure actuelle, lorsque je sélectionne un élément dans la liste déroulante de saisie semi-automatique, la valeur de l'ID de l'élément est stockée dans un champ masqué et l'étiquette est affichée. Lorsque je supprime l'étiquette, j'efface l'ID du champ caché - ceci est fait en ajoutant un élément d'ancrage au DOM qui gère cela.

Maintenant, je veux avoir plusieurs sélections. Je veux être en mesure d'entrer du texte, d'obtenir une liste déroulante de saisie semi-automatique, de sélectionner un élément et d'autres options, puis de cliquer sur un bouton "Ajouter un nouveau" ou sur les autres pour pouvoir sélectionner une autre instance. Par exemple, je tapais le nom d'une personne et obtenais une sélection de saisie semi-automatique. Je sélectionne une personne, puis entrez son âge et cliquez sur "Ajouter". L'identifiant, le nom et l'âge de la personne seront stockés quelque part afin que je puisse le récupérer du côté du serveur lorsque je publie.

Je ne sais pas trop comment le faire? Je pense à un champ caché - je suppose que de nombreux champs cachés du même nom/id apparaissent sur le serveur sous la forme d'un tableau, que je peux ensuite utiliser. Mais je n'ai pas encore essayé cela dans ASP.NET.

Comment avez-vous vécu ce problème?

Answer 1

Eh bien, aucune suggestion. Je l'ai fait par la suite, dans la sélection de saisie semi-automatique, en créant une gamme bien stylée. Son texte contient l'étiquette, il contient un élément d'ancrage auquel je lie un événement click qui supprime l'élément si nécessaire, et j'utilise l'API de données jQuery pour stocker la valeur d'ID sur l'étendue. Cette extension est ajoutée à une div conteneur, avant la zone de texte que j'utilise pour la saisie semi-automatique. Je lie également un événement keyup à la zone de texte pour vérifier le retour arrière - quand il est pressé et le champ de texte est vide, alors je supprime le dernier élément de saisie semi-automatique. C'est un peu plus complexe, car au moment où l'événement keyup est pressé, le caractère qui a été supprimé de la zone de texte a déjà été supprimé, donc je stocke la valeur réelle dans l'événement keydown en utilisant l'API jQuery l'événement de keyup.

Il y a un champ caché sur le formulaire, que je garde rempli avec une liste de valeurs d'ID séparées par des virgules extraites des données de la travée. Cela peut être synchronisé lorsque vous ajoutez ou supprimez des éléments, ou seulement lorsque je les reporte - il est plus simple de les effacer et de les repeupler, et c'est assez efficace pour autant que je sache.

Lors du chargement de la page, les plages et le champ masqué doivent être générés.

J'espère que cela aidera tous ceux qui cherchent une solution.