tagger Plugin

A jQuery plugin for the Twitter Bootstrap framework to manage tags.

More information about the tagger plugin can be found at A Curious Animal blog site.


tagger is a jQuery plugin that makes use of some Twitter Bootstrap framework components so. Because of this you need to include the Bootstrap CSS file in your web page followed by the tagger.css file:

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/tagger.css" rel="stylesheet" media="screen">
in addition to the jQuery library plus the tagger.js file:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/tagger.js"></script>

Using tagger

As any other jQuery plugin make an element selection and apply the tagger plugin:


tagger works on any element with a value attribute, typically an input element. Given next HTML element:

<input id="input1" value="some, tags, here" />
and the next JavaScript sentence:
this produces the next output:

Working in readOnly mode

You can force tagger to work in read only mode, that is, simply beautify the set of tags specified in the input element by setting the readOnly property to true :

<input input="inputReadOnly" value="some, tags, here, working, in, readOnly, mode" />
  readOnly: true

Change the field separator

By default tagger uses the , as the filed delimiter between tags. You can change this using the fieldSeparator property:

<input input="inputReadOnlyAndFieldSeparator" value="some | tags | here | working | in | readOnly | mode | with a | different | field separator " />
  readOnly: true,
  fieldSeparator: '|'


tagger offers three methods to work with our tags:

  • tags: to add one or more tags
  • remove: to remove one or more tags
  • clear: to clean our tag list
So, given an input element initialized with tagger we can make add three new tags like:
$('#myInput').tagger('tags', 'some, more, tags');
Duplicated tags are ignored
remove tags using:
$('#myInput').tagger('remove', 'more, tags');
If the tag doesn't exist nothing happens
or clearing all exisiting tags with:
$('#myInput').tagger('remove', 'more, tags');
The clear method uses internally the remove
In addition you can get all the existent tags invoking the tags method wihout parameters:


tagger allows to register different callbacks to know what is happening. They are:

  • onTagsAdded: invoked after the tags method is called
  • onTagsRemoved: invoked after the remove method is called
  • onClear: invoked after the clear method is called
  • onClick: invoked when a tag label is clicked
Next tagger has been initialized registering the previous callbacks. Make changes on the list and see what is happening: