How to avoid duplication of tags?

Question

I have a system simple tags box, the problem is that if I add the same word,

Example:

php, and php,

the label is duplicated with the same word.

Code complete.

 $(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> 

the only problem is the duplication of the label ( tags ), to the add a word same like.

Answer 1

Try this please. It just checks whether the same tag exists before adding it. You can add error message too if you want in the else clause.

 $(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 2

You could maintain an array of tag values that you check against before creating new tag elements. A message is shown if the user tries to enter a duplicate tag and the message is removed if the user removes a tag or successfully adds a new tag:

 $(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 3

Problem

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

Seems focusout is fire twice.keyup also calling focusout event.Seems it is append like method.

Suggesion

append vs html

use html method.You have to define a extra div to hold that dynamic content.It it wont concat.It won't depend on method number of occurence that method invoked.

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

use above instead of bellow if (txt) $("", { text: txt.toLowerCase(), insertBefore: this });

reference 1
reference 2