La opción de etiqueta de it OnlyAlavalaLetags no funciona

Question

Yo uso el complemento de etiqueta de https://github.com/aehlke/tag-it/downloads. ¿Cómo deshabilitar agregar nuevas etiquetas?

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

Traté de usar onlyAvailableTags : true y allowNewTags: false Opciones, pero no hay efecto.

Answer 1

Como dices "pero no hay efecto", supongo que eso @Html.Raw(ViewBag.AvailableTags) produce una salida que rompe la sintaxis de JavaScript. Las etiquetas deben estar en citas, de lo contrario se tratan como variables.

Salida incorrecta:

tagSource: [my-tag, another-tag]

Del lado del servidor, supongo que tienes algún tipo de IEnumerable<string>:

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

Entonces, en tu .cshtml:

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

Esto produciría la salida correcta:

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

Eso sería lo que intentaría primero.

Answer 2

Encontré eso al comentar:

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

Y:

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

Elimina esta funcionalidad. Quizás no sea la forma más limpia de hacerlo, pero funciona.

Solo comenta el if(){ } bucles.

Answer 3

Esto es lo que hice para la última versión 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;
        }
    }
});

Traté de hacerlo más limpio implementando

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

Pero this.availableTags no devuelve la matriz (regreso: undefined). Soy un JS Noob, por lo que algo debe estar mal con la forma en que accedo a la propiedad.