2016-10-10 49 views

回答

1

你可以使用tagit提供的afterTagAdded事件并移动你的代码推动t他重视那里的阵列。这样,当真正加了标签的代码才会执行​​:

代码

// 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);”

添加以下代码以TAG-IT功能(见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/

UPDATE:

要回答的评论。达到tagLimit时,使用“onTagLimitExceeded”提供反馈。工作示例这里:http://jsfiddle.net/uVxXg/144/

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

您可以在这里找到的标签,它的GitHub页面上的所有事件的列表:https://github.com/aehlke/tag-it/blob/master/README.markdown

+0

谢谢您的回答,一旦达到极限。我将如何显示最大限制消息。这会在同一个地方吗? – Garrett

+1

如果添加第三个标签,则不会执行代码。但是这种情况还有其他事件。查看更新的答案。 – TheNightmare

1

如果要您只需加一个你提交功能至极检查变量sampleTags

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

伊夫更新您的小提琴(http://jsfiddle.net/uVxXg/139/

我希望这个长度适合你:)