达到限制后如何停止将标签添加到数组？

Question

我试过使用以下方法设置可以插入盒子的标签数量限制：

tagLimit: 2,

虽然这会阻止您在框中输入超过 2 个，但它仍会将它们添加到“sampleTags”数组中。一旦达到限制，有人知道如何防止它添加到数组中吗？

JSFiddle：http://jsfiddle.net/uVxXg/137/

Answer 1

您只需在提交函数中添加一个 if 即可检查 sampleTags 变量的长度

  $('form').submit(function(e) {
    if(sampleTags.length < 2){
      var inp = $('#tagInput').val();
      $('#tagInput').val('');
      $('#tags').tagit('createTag', inp);
      sampleTags.push(inp);
    }
    e.preventDefault();
  });

我更新了你的 Fiddle (http://jsfiddle.net/uVxXg/139/)

我希望这对你有用:)

Answer 2

您可以使用 tagit 提供的 afterTagAdded 事件并移动您的代码，将值推送到那里的数组中。这样你的代码只会在真正添加标签时执行：

您的代码

  // When the user clicks submit
  $('form').submit(function(e) {
    var inp = $('#tagInput').val();
    $('#tagInput').val('');
    $('#tags').tagit('createTag', inp);
    sampleTags.push(inp);
    e.preventDefault();
  });

删除带有"sampleTags.push(inp);"

的行

将以下代码添加到 tagit 函数（参见 afterTagAdded 事件）：

// When the user clicks submit
  $('#tags').tagit({
    availableTags: sampleTags,
    tagLimit: 2,
    afterTagRemoved: function(evt, ui) {
        console.log(ui.tagLabel)
      for(var i = 0; i < sampleTags.length; i++) {
        if (sampleTags[i] == ui.tagLabel) {
          sampleTags.splice(i, 1);
        }
      }
    },
    afterTagAdded: function(evt, data){
        sampleTags.push(data.tagLabel);
    }
  });

在此处查看工作示例：http://jsfiddle.net/uVxXg/142/

更新：

回复评论。在达到 tagLimit 时使用 "onTagLimitExceeded" 进行反馈。此处的工作示例：http://jsfiddle.net/uVxXg/144/

    afterTagAdded: function(evt, data){
        sampleTags.push(data.tagLabel);
    },
    onTagLimitExceeded: function(evt, data){
        alert('Tag limit reached!');
    }

您可以在此处的 tag-it github 页面上找到所有事件的列表：https://github.com/aehlke/tag-it/blob/master/README.markdown

达到限制后如何停止将标签添加到数组？

How to stop tags being added to an array once limit is reached?

html

jquery

tag-it