Twitter Bootstrap 3 Typeahead / Tagsinput se terminant deux fois

Edit: JSFiddle de travail ajouté

J’utilise Twitter Bootstrap TagsInput avec Bootstrap Typeahead. Mon source est un fichier JSON, mais cela n’a aucune importance et j’ai vérifié avec une source statique.

entrez la description de l'image ici

Le typeahead et tagsinput fonctionnent, mais lorsque j’appuie sur Entrée, que je clique sur un tag ou que je clique dessus, un double est créé.

entrez la description de l'image ici

Cet extre ‘défaut’ se produit chaque fois que j’appuie sur Entrée ou que je complète le texte. Si je casse la tête de frappe en séparant par une virgule ou en éloignant le focus de la fenêtre, cela ne se produit pas.

Voici l’entrée:

Et voici le script:

   $('.tagsInput').tagsinput({ confirmKeys: [13, 44], maxTags: 1, typeahead: { source: function(query) { return $.get('listcategories.php'); } } });

Je suis sûr que c’est quelque chose de méchant qui ne sera pas reproductible, avec ma chance, alors j’espère que quelqu’un aura des connaissances institutionnelles qui, à leur connaissance, provoqueraient une telle chose.

Voici une image du texte supplémentaire, en dev. outils: entrez la description de l'image ici

J’apprécie vraiment tout conseil ou suggestion. Je vous remercie.

CODE DE TRAVAIL

Grâce à @Girish, voici ce qui a “résolu” ce problème. Je crois qu’il s’agit d’un bogue en ce moment, introduit quelque part dans une version plus récente de jQuery ou de Typeahead. Ce code supprime simplement l’élément supplémentaire manuellement, mais nous espérons que quelque chose se présentera pour l’empêcher d’être placé là en premier lieu, éliminant ainsi le code supplémentaire. Pour l’instant cela fonctionne pour moi.

  $('.tagsInput').tagsinput({ confirmKeys: [13, 44], maxTags: 1, typeahead: { source: function(query) { return $.get('tags.php'); } } }); $('.tagsInput').on('itemAdded', function(event) { setTimeout(function(){ $(">input[type=text]",".bootstrap-tagsinput").val(""); }, 1); });

Je ne suis pas sûr que cela ressemble à un bogue, aucun code personnalisé à l’intérieur de la fonction, mais la balise sélectionnée est répétée dans le champ de saisie, mais vous pouvez utiliser une autre solution, événement itemAdded pour supprimer la valeur sélectionnée du champ de input , voir ci-dessous un exemple de code.

 $('input').tagsinput({ typeahead: { source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo'] }, freeInput: true }); $('input').on('itemAdded', function(event) { setTimeout(function(){ $(">input[type=text]",".bootstrap-tagsinput").val(""); }, 1); });

J’ai également remarqué que le champ de saisie générait chaque section de balise afin que this champ ou this event ne puisse pas être ciblé. En raison du champ de saisie de la génération dynamic, vous devrez également différer la sélection de l’élément d’entrée dans

DEMO

UPDATE : La fonction $.get() renvoie xhr object xhr non une réponse du serveur. Vous devez donc append une méthode de callback pour obtenir une réponse AJAX. Voir l’exemple de code ci-dessous.

 $('.tagsInput').tagsinput({ confirmKeys: [13, 44], maxTags: 1, typeahead: { source: function(query) { return $.get('listcategories.php').done(function(data){ /*if you have add `content-type: application/json` in server response then no need to parse JSON otherwise, you will need to parse response into JSON.*/ return $.parseJSON(data); }) } } });