Question

我正在使用tag-it，因此用户可以为自己的帖子创建标记。

它目前允许他们键入任何内容，但我有一个JSON形式的禁止词列表。我怎么能将这个实现到tagit插件中，所以当用户输入的单词与其中一个被禁止的单词匹配时，它会引发错误。

如何查看swearWords.json中是否存在ui.tag？

这是我目前的代码：

$('#methodTags_text').tagit({
    availableTags: sampleTags,
    tagLimit:3,
    maximumInputLength: 10,
    fieldName: "item[tags][]",
    beforeTagAdded: function(event, ui) {
       // if ui.tag exists in swearWords.json
       // Then output error
       $('#banned_error').html('You can use this word.')
    }
});

swearWords.json

["word1","word2","word3","word4","word5"]

使用FrançoisWahl回答我设法找到了一个有效的解决方案......

$('#methodTags_text').tagit({
    availableTags: sampleTags,
    tagLimit:3,
    maximumInputLength: 10,
    removeConfirmation: true,
    fieldName: "item[tags][]",
    beforeTagAdded: function(event, ui) {
           if (!ui.duringInitialization) {
                var word = eventTags_text.tagit('tagLabel', ui.tag);
                if($.inArray(word , words) > -1){
                    $('#banned_error').html('You cant use this word.');
                    $("#methodTags_url").tagit("removeTagByLabel", word);
                } else {$('#banned_error').html('');}   
           }
    }
});

还要在var

中获取外部json

var words = (function () {
    var words = null;
    $.ajax({
        'async': false,
        'global': false,
        'url': "swearWords.json",
        'dataType': "json",
        'success': function (data) {
            words = data;
        }
    });
    return words;
})();

Answer 1

如果单词在数组中，您可以使用jQuery inArray()执行此操作：

var words = ["word1","word2","word3","word4","word5"]

beforeTagAdded: function(event, ui) {
    // if ui.tag exists in swearWords.json
    // Then output error
    var word = "word4"; // I'm assuming you get the word from some control though.
    if($.inArray(word , words) > -1){
       $('#banned_error').html('You can use this word.')
    }
}

DEMO - 检查输入的单词是否为数组

DEMO的代码：

<input id="word" type="text"></input>
<button id="checkWord" type="button">Check Word</button>

var words = ["word1","word2","word3","word4","word5"]

$("#checkWord").on("click", function(){
    var word = $("#word").val();

    if($.inArray(word, words) > -1){
       alert("You cannot use this word");
    }
});

Answer 2

试试这个

swearWords.each(function(i,val){
   if(ui.tag == val){
      $('#banned_error').html("You can't use this word.")
  }else{
     //do your stuff
  }
}

Answer 3

我想，你可以使用这样的东西：

beforeTagAdded: function(event, ui) {
  if (!this._swearWords) {
    // send synchonous XHR to load banned words.
    var xhr = null;
    if (window.XMLHttpRequest) {
        xhr = new window.XMLHttpRequest();
    }
    else if (window.ActiveXObject) {
        xhr = new window.ActiveXObject('Microsoft.XMLHTTP');
    }

    if (!xhr) {
        return;
    }

    xhr.open('GET', 'swearWords.json', false);
    xhr.send(null);
    this._swearWords = JSON.parse(xhr.responseText);
  }

  if (tag in this._swearWords) { // I don't know how to get tag...
    // if ui.tag exists in swearWords.json
    // Then output error
    $('#banned_error').html('You can use this word.')
  }
}

Answer 4

使用Object更好更快，而不是使用Array来定义禁止的单词。

{'word1': 1, 'word2': 1, 'word3':1}

然后您可以使用in运算符进行检测。如果你使用Array，你（或jQuery）已经遍历数组循环来检查项目的存在。请注意，Array.indexOf未实施，例如在IE8中。

Answer 5

我正在为你将tagit附加到class与id的情况附加解决方案（如在转发器中，即搜索结果）。当您附加到类时，您必须在上下文中访问tagit，以便在验证失败时能够删除您的标记，例如。

    $(".recTags").tagit({
        afterTagAdded: function (event, ui) {
            if (!ui.duringInitialization) {
                // some validation
                if (ui.tagLabel.length <= 50) {
                    $('#tag_error').html('');
                    // do something
                } else {
                    $('#tag_error').html('Tag "'+ ui.tagLabel +'" is too long [50 character limit].');
                    ui.tag.parent().tagit("removeTagByLabel", ui.tagLabel);
                }
            }
        }
    });

对我来说重要的一点就是弄清楚如何调用removeTagByLabel，从哪个元素：

ui.tag.parent().tagit("removeTagByLabel", ui.tagLabel);

我无法使用beforeTagAdded事件，因为此时ui.tag.parent()不存在，因为标签尚未添加到DOM中，因此检查在afterTagAdded内。我确信还有其他方法可以做到这一点，但这对我有用。

检查外部JSON中是否存在单词

5 个答案: