Simple Easy jQuery Based Tagging System - TagEditor
File Size: | 1.93 KB |
---|---|
Views Total: | 3345 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.