L'option TAG-it onlyavalaibletags ne fonctionne pas
-
28-10-2019 - |
Question
J'utilise le plugin Tag-it de https://github.com/aehlke/tag-it/downloads. Comment désactiver l'ajout de nouvelles balises?
$(document).ready(function () {
$("#Tags").tagit({
singleField: true,
singleFieldNode: $('#mySingleField'),
// onlyAvailableTags : true,
allowNewTags: false,
tagSource: [@Html.Raw(ViewBag.AvailableTags)]
});
});
J'ai essayé d'utiliser onlyAvailableTags : true
et allowNewTags: false
Options, mais il n'y a aucun effet.
La solution
Puisque vous dites "mais il n'y a aucun effet", je suppose que @Html.Raw(ViewBag.AvailableTags)
produit une sortie qui brise la syntaxe JavaScript. Les balises doivent être entre guillemets, sinon elles sont traitées comme des variables.
Sortie incorrecte:
tagSource: [my-tag, another-tag]
Côté serveur, je suppose que vous avez une sorte de IEnumerable<string>
:
ViewBag.AvailableTags = new List<string>
{
"my-tag",
"another-tag",
};
Ensuite, dans votre .cshtml
:
tagSource: ["@string.Join("\", \"", ViewBag.AvailableTags)"]
Cela produirait la sortie correcte:
tagSource: ["my-tag", "another-tag"]
Ce serait ce que j'essaierais en premier.
Autres conseils
J'ai trouvé cela en commentant:
// Autocomplete will create its own tag from a selection and close automatically.
if (!that.tagInput.data('autocomplete-open')) {
that.createTag(that._cleanedInput());
}
Et:
// Create a tag when the element loses focus.
// If autocomplete is enabled and suggestion was clicked, don't add it.
if (!that.tagInput.data('autocomplete-open')) {
that.createTag(that._cleanedInput());
}
Il supprime cette fonctionnalité. Peut-être pas le moyen le plus propre de le faire, mais cela fonctionne.
Commentez simplement le if(){ }
boucles.
C'est ce que j'ai fait pour la dernière version de Tag-It:
var tags_list = ['tag1', 'tag2, 'tag3];
$("input[name='subject-tags']").tagit({
availableTags : tags_list,
beforeTagAdded : function(event, ui) {
if(tags_list.indexOf(ui.tagLabel) == -1){
return false;
}
}
});
Essayé de le rendre plus propre en mettant en œuvre
$("input[name='subject-tags']").tagit({
availableTags : ['tag1', 'tag2, 'tag3],
beforeTagAdded : function(event, ui) {
if(this.availableTags.indexOf(ui.tagLabel) == -1){
return false;
}
}
});
Mais this.availableTags
ne renvoie pas le tableau (retour: undefined
). Je suis un JS noob, donc quelque chose doit ne pas être avec la façon dont j'accéde à la propriété.