L'option TAG-it onlyavalaibletags ne fonctionne pas

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.

Answer 1

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.

Answer 2

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.

Answer 3

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é.