Simple Easy jQuery Based Tagging System - TagEditor

A simple Html/CSS/jQuery based tagging system that allows you to quickly & easily add, remove tags/tokens in a text field.

How to use it:

1. Create an Html list containing predefined tags on your web page.

<ul class="tags">
  <li class="addedTag">
    C++
    <span onclick="$(this).parent().remove();" class="tagRemove">x</span>
    <input type="hidden" name="tags[]" value="Web Deisgn">
  </li>
  <li class="addedTag">
    C#
    <span onclick="$(this).parent().remove();" class="tagRemove">x</span>
    <input type="hidden" name="tags[]" value="Web Develop">
  </li>
  <li class="addedTag">
    Object-C
    <span onclick="$(this).parent().remove();" class="tagRemove">x</span>
    <input type="hidden" name="tags[]" value="SEO">
  </li>
</ul>

2. Add a text field for the tags input into the Html list.

<li class="tagAdd taglist">
  <input type="text" id="tags-field">
</li>

3. The core CSS styles for the tags & tags input.

.tags {
  background: none repeat scroll 0 0 #fff;
  border: 1px solid #ccc;
  display: table;
  padding: 0.5em;
  width: 100%;
}

.tags li.tagAdd,
.tags li.addedTag {
  float: left;
  margin-left: 0.25em;
  margin-right: 0.25em;
}

.tags li.addedTag {
  background: none repeat scroll 0 0 #1ABC9C;
  border-radius: 5px;
  color: #fff;
  padding: .5em;
}

.tags input,
li.addedTag {
  border: 1px solid transparent;
  border-radius: 5px;
  box-shadow: none;
  display: block;
  padding: 0.5em;
}

.tags input:hover { border: 1px solid #000; }

4. The core JavaScript (jQuery) to enable the tagging system.

$(document).ready(function() {

$('#addTagBtn').click(function() {
  $('#tags option:selected').each(function() {
      $(this).appendTo($('#selectedTags'));
  });
});

$('#removeTagBtn').click(function() {
  $('#selectedTags option:selected').each(function(el) {
      $(this).appendTo($('#tags'));
  });
});

$('.tagRemove').click(function(event) {
  event.preventDefault();
  $(this).parent().remove();
});

$('ul.tags').click(function() {
  $('#tags-field').focus();
});

$('#tags-field').keypress(function(event) {
  if (event.which == '13') {
    if ($(this).val() != '') {
      $('<li class="addedTag">' + $(this).val() + '<span class="tagRemove" onclick="$(this).parent().remove();">x</span><input type="hidden" value="' + $(this).val() + '" name="tags[]"></li>').insertBefore('.tags .tagAdd');
      $(this).val('');
    }
  }
});

});

---

This awesome jQuery plugin is developed by miladbruce. For more Advanced Usages, please check the demo page or visit the official website.