GitHub - mazharul/jQuery-Tags-Input: Magically convert a simple text input into a cool tag list with this jQuery plugin.

Branches Tags

Name		Name	Last commit message	Last commit date
Latest commit History 28 Commits
README		README
jquery.tagsinput.css		jquery.tagsinput.css
jquery.tagsinput.js		jquery.tagsinput.js
jquery.tagsinput.min.js		jquery.tagsinput.min.js
test.html		test.html

Repository files navigation

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.

If you do not want to provide a way to add tags, or you would prefer to provide an alternate
interface for adding tags to the box, you may pass an false into the optional 'interactive' parameter. 
The tags will still be rendered as per usual, and the addTag and removeTag functions will 
operate as expected.   

Options

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