tag-it: fonction de sélection en saisie semi-automatique ne fonctionnant pas

Question

J'utilise tag-it plugin pour prendre des entrées d'étiquette de l'utilisateur. La source d'étiquette pour l'auto-complétion utilisée est par l'intermédiaire d'un appel ajax qui renvoie des objets json à l'aide desquels je mappe les valeurs et les noms des étiquettes à afficher à l'utilisateur. L'objet json contient également un ID pour chacune des balises que je ne veux pas montrer à l'utilisateur mais envoyer au serveur à la place de l'étiquette/valeur de balise. Pour ce faire, j'ai pensé que je pourrais utiliser une fonction sous "select" option généralement disponible en saisie semi-automatique. Cette fonction maintient un tableau de tous les ID sélectionnés par l'utilisateur. Mais la fonction select n'est tout simplement pas appelée lorsque je sélectionne une balise. Le code que j'utilise est le suivant:

$("#myTags").tagit({ 
     allowSpaces: true, 
     autocomplete: { 
      source: function (request, response) { 
       $.ajax({ 
        url: "http://localhost:5555/api/Tag", 
        dataType: "json", 
        data: { 
         strSearch: request.term 
        }, 
        success: function (data) { 
         response($.map(data, function (item) { 
          return { 
           label: item.Name, //Use rest of the data to map IDs 
           value: item.Name, 
           ID: item.ID 
          } 
         })); 
        } 
       }); 
      }, 
      minLength: 1, 
      select: function (event, ui) { 
       console.log(ui.item.label + "=" + ui.item.ID); 
      } 

     } 

    }); 

Answer 1

Pour moi, la sélection n'a pas fonctionné avec les touches HAUT/BAS et ENTER. Jut travaillé avec la souris et la languette.

J'ai essayé un code de détection de clé comme suggéré dans un autre post (si key == 13), mais aucun n'a fonctionné pour moi.

Ma solution était de mettre l'événement de mise au point où je stocke temporairement le dernier objet qui a le focus. Ensuite, lorsque l'utilisateur clique sur la touche ou clique avec la souris, je vérifie si l'étiquette tapée est la même que la dernière sur l'étiquette de mise au point. C'est le même effet que si l'étiquette était «sélectionnée»:

// Variable used to store temporarily the focused label from 
// the autocomplete list. 
var focusedTag = null; 

$('#tags-list').tagit({ 

    fieldName: 'tags', 

    autocomplete: { 

     source: function (request, response) { /* Load your list... */ }, 

     // Stored the tag that received focus temporarily, to solve 
     // enter key problem. 
     focus: function(event, ui) { 
      focusedTag = ui.item; 
     }, 

     delay: 100, 
     minLength: 3 
    }, 

    afterTagAdded: function (event, ui) { 

     if (focusedTag !== null && 
       focusedTag.label === ui.tagLabel) { 
      // Same as if it was selected... 
     } 

     focusedTag = null; 

    }, 

    allowSpaces: true 
}); 

Cheers.