tagger Plugin

---

Dependencies

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:

$(some_selection).tagger();

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:

$('#myInput').tagger();

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" />

$('#inputReadOnly').tagger({
  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 " />

$('#inputReadOnly').tagger({
  readOnly: true,
  fieldSeparator: '|'
});

Methods

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');

remove tags using:

$('#myInput').tagger('remove', 'more, tags');

or clearing all exisiting tags with:

$('#myInput').tagger('remove', 'more, tags');

In addition you can get all the existent tags invoking the tags method wihout parameters:

$('#myInput').tagger('tags');

Callbacks

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: