jQuery-Tags-Input

jQuery Tags Input Plugin 1.2

Copyright (c) 2010 XOXCO, Inc

Documentation for this plugin lives here:
http://xoxco.com/clickable/jquery-tags-input

Licensed under the MIT license:
http://www.opensource.org/licenses/mit-license.php

ben@xoxco.com
------------------------------------------------------

Do you use tags to organize content on your site? 
This plugin will turn your boring tag list into a 
magical input that turns each tag into a style-able 
object with its own delete link. The plugin handles 
all the data - your form just sees a comma-delimited 
list of tags!


Instructions

First, add the Javascript and CSS files to your <head> tag:

<script src="jquery.tagsinput.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />

Create a real input in your form that will contain a comma-separated list of tags. 
You can put any default or existing tags in the value attribute, and they'll be handled properly.

<input name="tags" id="tags" value="foo,bar,baz" />

Then, simply call the tagsInput function on any field that should be treated as a list of tags.

$('#tags').tagsInput();

If you want to use jQuery.autocomplete, you can pass in a parameter with the autocomplete url.

$('#tags').tagsInput({autocomplete_url:'http://myserver.com/api/autocomplete'});

You can also send in options to the autocomplete plugin, as described here.

$('#tags').tagsInput({    autocomplete_url:'http://myserver.com/api/autocomplete',
   autocomplete:{selectFirst:true,width:'100px',autoFill:true}
});

You can add and remove tags by calling the addTag() and removeTag() functions.

$('#tags').addTag('foo');
$('#tags').removeTag('bar');

If additional functionality is required when a tag is added or removed, you may specify
callback functions via the onAddTag and onRemoveTag parameters.  Both functions should
accept a single tag as the parameter.

Options

$(selector).tagsInput({
   'autocomplete_url': url_to_autocomplete_api,
   'autocomplete': { option: value, option: value},
   'height':'100px',
   'width':'300px',
   'defaultText':'add a tag',
   'onAddTag':callback_function,
   'onRemoveTag':callback_function,
   'minChars' : 0,
   'maxChars' : 0 //if not provided there is no limit
});