1

我正在使用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çois Wahl 的答案，我设法得到了一个可行的解决方案......

$('#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;
})();
4

5 回答 5

2

鉴于单词在数组中，您可以使用 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");
    }
});
于 2013-01-24T10:20:46.393 回答
0

试试这个

swearWords.each(function(i,val){
   if(ui.tag == val){
      $('#banned_error').html("You can't use this word.")
  }else{
     //do your stuff
  }
}
于 2013-01-24T10:18:45.440 回答
0

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

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.')
  }
}
于 2013-01-24T10:22:44.360 回答
0

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

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

然后就可以使用in算子进行检测了。如果您使用 Array 您（或 jQuery）已经通过循环中的数组来检查项目的存在。请记住，Array.indexOf例如在 IE8 中没有实现。

于 2013-01-24T10:31:43.560 回答
0

对于将 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. 我相信还有其他方法可以做到这一点，但这对我有用。

于 2013-05-22T19:36:23.703 回答