如何避免重复标签？

Question

我有一个系统，简单的标签盒，问题是，如果我添加了同一个词，

例子：

PHP和PHP，

的标签重复使用同一个词。

完成代码。

$(function(){ // DOM ready 
 

 
    // ::: TAGS BOX 
 

 
    $("#tags input").on({ 
 
    focusout : function() { 
 
     var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig,''); // allowed characters 
 
     if(txt) $("<span/>", {text:txt.toLowerCase(), insertBefore:this}); 
 
     this.value = ""; 
 
    }, 
 
    keyup : function(ev) { 
 
     // if: comma|enter (delimit more keyCodes with | pipe) 
 
     if(/(188|13)/.test(ev.which)) $(this).focusout(); 
 
    } 
 
    }); 
 
    $('#tags').on('click', 'span', function() { 
 
    $(this).remove(); 
 
    }); 
 

 
});

#tags{ 
 
    float:left; 
 
    border:1px solid #ccc; 
 
    padding:5px; 
 
    font-family:Arial; 
 
} 
 
#tags > span{ 
 
    cursor:pointer; 
 
    display:block; 
 
    float:left; 
 
    color:#fff; 
 
    background:#789; 
 
    padding:5px; 
 
    padding-right:25px; 
 
    margin:4px; 
 
} 
 
#tags > span:hover{ 
 
    opacity:0.7; 
 
} 
 
#tags > span:after{ 
 
position:absolute; 
 
content:"×"; 
 
border:1px solid; 
 
padding:2px 5px; 
 
margin-left:3px; 
 
font-size:11px; 
 
} 
 
#tags > input{ 
 
    background:#eee; 
 
    border:0; 
 
    margin:4px; 
 
    padding:7px; 
 
    width:auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="tags"> 
 
    <input type="text" value="" placeholder="Add a tag" /> 
 
</div>

唯一的问题是标签（标签）的重复，在添加单词相同等。

Answer 1

你可以保持您检查对创建新标签元素之前的变量值的数组。如果用户试图输入一个重复的标记示出的消息，并且如果用户删除一个标签或成功地增加了一个新的标记将被删除的消息：

$(function() { // DOM ready 
 

 
    // ::: TAGS BOX 
 

 
    var tags = []; 
 

 
    $("#tags input").on({ 
 
    focusout: function() { 
 
     var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig, ''); // allowed characters 
 
     if (txt) { 
 
     // Check if array contains value before creating span 
 
     if ((tags.indexOf(txt) === -1)) { 
 
      $('#message').hide(); 
 
      $("<span/>", { 
 
      text: txt.toLowerCase(), 
 
      insertBefore: this 
 
      }); 
 
     } else { 
 
      $('#message').show(); 
 
     } 
 
     } 
 
     tags.push(txt); 
 
     this.value = ""; 
 
    }, 
 
    keyup: function(ev) { 
 
     // if: comma|enter (delimit more keyCodes with | pipe) 
 
     if (/(188|13)/.test(ev.which)) $(this).focusout(); 
 
    } 
 
    }); 
 
    $('#tags').on('click', 'span', function() { 
 
    var text = $(this).text(); 
 
    // Filter tag array on tag removal 
 
    tags = tags.filter(function(e) { 
 
     return e !== text; 
 
    }); 
 
    $('#message').hide(); 
 
    $(this).remove(); 
 
    }); 
 
});

#tags { 
 
    float: left; 
 
    border: 1px solid #ccc; 
 
    padding: 5px; 
 
    font-family: Arial; 
 
} 
 
#tags > span { 
 
    cursor: pointer; 
 
    display: block; 
 
    float: left; 
 
    color: #fff; 
 
    background: #789; 
 
    padding: 5px; 
 
    padding-right: 25px; 
 
    margin: 4px; 
 
} 
 
#tags > span:hover { 
 
    opacity: 0.7; 
 
} 
 
#tags > span:after { 
 
    position: absolute; 
 
    content: "×"; 
 
    border: 1px solid; 
 
    padding: 2px 5px; 
 
    margin-left: 3px; 
 
    font-size: 11px; 
 
} 
 
#tags > input { 
 
    background: #eee; 
 
    border: 0; 
 
    margin: 4px; 
 
    padding: 7px; 
 
    width: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="tags"> 
 
    <input type="text" value="" placeholder="Add a tag" /> 
 
</div> 
 
<p id="message" style="display:none">You cannot create a duplicate tag.</p>

Answer 2

请尝试此操作。它只是在添加之前检查是否存在相同的标签。如果你想在else子句中，你也可以添加错误信息。

$(function(){ // DOM ready 
 

 
    // ::: TAGS BOX 
 

 
    $("#tags input").on({ 
 
    focusout : function() { 
 
     var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig,''); // allowed characters 
 
     if(txt && !$("#tags span:contains("+ txt.toLowerCase() +")").length) { 
 
     
 
     $("<span/>", {text:txt.toLowerCase(), insertBefore:this}); 
 
     this.value = ""; 
 
     } 
 
    }, 
 
    keyup : function(ev) { 
 
     // if: comma|enter (delimit more keyCodes with | pipe) 
 
     if(/(188|13)/.test(ev.which)) $(this).focusout(); 
 
    } 
 
    }); 
 
    $('#tags').on('click', 'span', function() { 
 
    $(this).remove(); 
 
    }); 
 

 
});

#tags{ 
 
    float:left; 
 
    border:1px solid #ccc; 
 
    padding:5px; 
 
    font-family:Arial; 
 
} 
 
#tags > span{ 
 
    cursor:pointer; 
 
    display:block; 
 
    float:left; 
 
    color:#fff; 
 
    background:#789; 
 
    padding:5px; 
 
    padding-right:25px; 
 
    margin:4px; 
 
} 
 
#tags > span:hover{ 
 
    opacity:0.7; 
 
} 
 
#tags > span:after{ 
 
position:absolute; 
 
content:"×"; 
 
border:1px solid; 
 
padding:2px 5px; 
 
margin-left:3px; 
 
font-size:11px; 
 
} 
 
#tags > input{ 
 
    background:#eee; 
 
    border:0; 
 
    margin:4px; 
 
    padding:7px; 
 
    width:auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="tags"> 
 
    <input type="text" value="" placeholder="Add a tag" /> 
 
</div>

Answer 3

问题

$("#tags input").on({ 
    focusout: function() { 
     //append text(sugsession :Not use append process.Use html() like replace existing content method.) 
    }, 
    keyup: function (ev) { 
      ....$(this).focusout(); 
    } 
}); 

似乎focusout是fire两次.keyup也调用focusout事件。它看起来像追加方法。

Suggesion

追加VS HTML

使用HTML method.You必须定义一个额外的div来保存动态content.It它不会concat.It将不依赖于occurence该方法的方法数调用。

$("#newDiv").html(txt.toLowerCase()); 

使用上述的代替波纹管 如果（TXT）$（ “”，{ 文本：txt.toLowerCase（）， 的insertBefore：此 }）;

reference 1
reference 2