tag-itの唯一のavalaibletagsオプションは機能しません

Question

からのTag-ITプラグインを使用しています https://github.com/aehlke/tag-it/downloads. 。新しいタグの追加を無効にする方法は？

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

使ってみました onlyAvailableTags : true と allowNewTags: false オプションですが、効果はありません。

Answer 1

あなたは「しかし効果はない」と言うので、私はそれを推測するでしょう @Html.Raw(ViewBag.AvailableTags) JavaScriptの構文を破る出力を生成します。タグは引用符である必要があります。そうしないと、変数として扱われます。

出力が誤っていない：

tagSource: [my-tag, another-tag]

サーバー側、私はあなたが何らかの種を持っていると思います IEnumerable<string>:

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

それから、あなたの中に .cshtml:

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

これにより、正しい出力が生成されます。

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

それが私が最初に試してみることです。

Answer 2

コメントすることでそれを見つけました：

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

と：

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

この機能を削除します。おそらくそれを行う最もきれいな方法ではありませんが、それは機能します。

コメントするだけです if(){ } ループ。

Answer 3

これは、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;
        }
    }
});

実装してクリーンにしようとしました

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

しかし this.availableTags 配列を返しません（戻ります： undefined）。私はJS noobなので、私がプロパティにアクセスする方法について何かが間違っているに違いありません。