Tag-iT Solovalaibletags L'opzione non funziona

Question

Uso il plug-in tag-it da https://github.com/aehlke/tag-it/downloads. Come disabilitare l'aggiunta di nuovi tag?

$(document).ready(function () {
                $("#Tags").tagit({
                    singleField: true,
                    singleFieldNode: $('#mySingleField'),
                     //  onlyAvailableTags : true,
                     allowNewTags: false,
                    tagSource: [@Html.Raw(ViewBag.AvailableTags)]
                });
            });

Ho provato a usare onlyAvailableTags : true e allowNewTags: false Opzioni, ma non c'è effetto.

Answer 1

Dato che dici "ma non c'è alcun effetto", lo immagino @Html.Raw(ViewBag.AvailableTags) Produce un output che rompe la sintassi di JavaScript. I tag devono essere tra virgolette, altrimenti sono trattati come variabili.

Output errata:

tagSource: [my-tag, another-tag]

Lato server, presumo che tu abbia una sorta di IEnumerable<string>:

ViewBag.AvailableTags = new List<string>
{
    "my-tag",
    "another-tag",
};

Quindi, nel tuo .cshtml:

tagSource: ["@string.Join("\", \"", ViewBag.AvailableTags)"]

Ciò produrrebbe l'output corretto:

tagSource: ["my-tag", "another-tag"]

Sarebbe quello che proverei prima.

Answer 2

L'ho trovato commentando:

 // Autocomplete will create its own tag from a selection and close automatically.
 if (!that.tagInput.data('autocomplete-open')) {
    that.createTag(that._cleanedInput());
 }

E:

// 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());
}

Rimuove questa funzionalità. Forse non il modo più pulito per farlo, ma funziona.

Basta commentare il if(){ } Loop.

Answer 3

Questo è quello che ho fatto per l'ultima versione di 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;
        }
    }
});

Ha cercato di renderlo più pulito implementando

$("input[name='subject-tags']").tagit({
    availableTags : ['tag1', 'tag2, 'tag3],
    beforeTagAdded : function(event, ui) {
        if(this.availableTags.indexOf(ui.tagLabel) == -1){
            return false;
        }
    }
});

Ma this.availableTags non restituisce l'array (ritorno: undefined). Sono un JS noob, quindi qualcosa deve essere sbagliato nel modo in cui accedo alla proprietà.