CODEWITHSUNDEEP
jqueryhtml
nyjn24
nyjn24

Reputation: 104

Separate TAG when there is comma

I want to make that when I type tag, tag, tag inside input[type=text] and click/press ADD button the result will be 3 tags. And avoid duplicate tag.

<div class="upload-input-tag clearfix">
    <input class="form-control" type="text" name="tag" placeholder="Tags">
    <button type="button" class="btn add-tag">ADD</button>
    <span>Separate tags with commas</span>
</div>
<!-- content for added tag -->
<div class="upload-added-tag">
    <div class="added-tag"><button type="button" class="remove-tag btn"><i class="zmdi zmdi-close-circle"></i></button>hiphop</div>
    <div class="added-tag"><button type="button" class="remove-tag btn"><i class="zmdi zmdi-close-circle"></i></button>bezells</div>
    <div class="added-tag"><button type="button" class="remove-tag btn"><i class="zmdi zmdi-close-circle"></i></button>streets</div>
    <div class="added-tag"><button type="button" class="remove-tag btn"><i class="zmdi zmdi-close-circle"></i></button>dream</div>
    <div class="added-tag"><button type="button" class="remove-tag btn"><i class="zmdi zmdi-close-circle"></i></button>visuals</div>
    <div class="added-tag"><button type="button" class="remove-tag btn"><i class="zmdi zmdi-close-circle"></i></button>sauce</div>
</div>

JQUERY

$(".add-tag").click(function(){
  var newTag = $.trim( $('.upload-input-tag input').val() );

  if (!newTag) return; //avoid adding empty div
    var newAddedTag = '<div class="added-tag"><button type="button" class="remove-tag btn"><i class="zmdi zmdi-close-circle"></i></button>' + newTag +'</div>';   

    $(".upload-added-tag").append(newAddedTag);

    $(".upload-input-tag input").val(''); //clearing value

    $('.remove-tag').on('click', function(){
      $(this).parent().remove();
    });
  });

The adding and removing tag is working fine, what I want to add to jQuery is to detect that if I used comma(,) inside input it will separate and if avoid duplicate tags but I'm not that good enough to make it work. I'm still learning JS/jQuery :D

THANK YOU FOR HELPING!

Upvotes: 0

Views: 1316

Answers (2)

Donnie D&#39;Amato
Donnie D&#39;Amato

Reputation: 3940

I'd recommend checking for multiple keycodes (you might want to make tags when they hit enter or tab or some other key).

$('input[name="tag"]').on('keyup', function(e){
    var breakKeys = [9, 188, 13]; //add less or more codes from http://keycode.info/
    if(breakKeys.indexOf(e.keyCode) >= 0 && $(this).val() !== ''){
        makeTag($(this).val())
    }
})

Depending on the key you chose, you might need to remove it from the value you pass into the next function (like comma). Just use String.slice() for those.

From here, just have a new function that makes a tag. You can also check existing tags inside of that function, but I recommend wrapping the tag text in an element for easy reference.

function makeTag(value){
    var html = '<button type="button" class="remove-tag btn"><i class="zmdi zmdi-close-circle"></i></button><span>' + value +'</span></div>';
    var existing = $('.upload-added-tag .added-tag span').map(function(){return $(this).text()}).get();
    if(existing.indexOf(value) < 0){
         $('<div/>').addClass('.added-tag').html(html).appendTo('.uploaded-added-tag');

    }
}

The existing variable might look weird, but it's super helpful when you want to make an array of values that are kept within jQuery objects.

Upvotes: 1

Matt Spinks
Matt Spinks

Reputation: 6698

You could do a split on the , character. That will create an array of text objects. Then you can iterate through those objects and create an element for each. To avoid duplicate tags, use a counter to add an attribute to each element.

$(".add-tag").click(function(){
  var newTag = $.trim( $('.upload-input-tag input').val() );
  if (!newTag) return; //avoid adding empty div
  var tags = newTag.split(','); //CREATE AN ARRAY BASED ON COMMA PLACEMENT
  for (var i in tags) { 
    //THE USE OF  id="tag-' + i + '" WILL PREVENT DUPLICATE TAGS
    var newAddedTag = '<div class="added-tag" id="tag-' + i + '"><button type="button" class="remove-tag btn"><i class="zmdi zmdi-close-circle"></i></button>' + tag[i] +'</div>'; 
    $(".upload-added-tag").append(newAddedTag);
  }
  $(".upload-input-tag input").val(''); //clearing value
  $('.remove-tag').on('click', function(){
    $(this).parent().remove();
  });
});

Upvotes: 0

Related Questions