mirror of
https://github.com/wahyd4/jQuery-Tags-Input.git
synced 2026-08-09 12:56:35 +10:00
71 lines
2.2 KiB
Plaintext
71 lines
2.2 KiB
Plaintext
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
|
|
});
|
|
|