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.
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éé.
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:
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
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); }) } } });