Paul Paul - 3 months ago 6
CSS Question

How to avoid duplication of tags?

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

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>