Tagbox is a simple tagging plugin for jQuery.
#Usage
(Examples at: http://saynotofastfood.info/tagbox/examples)
Download the plugin and include jquery.tagbox.js and tags.css in your page to get started.
The simplest way to use Tagbox is to put this code inside a script
tag:
$('.tagbox').tagbox();
Tagbox can be applied to input / textarea fields. They will be converted to div's.
This way, when the user clicks on the .tagbox
element, a new tag will be created to receive input. New tags are created automatically when user presses , or ','.
##Parameters
classname
:String. The html class name of the tag (default: 'tag')name
:String. The text field name (default: none)separator
:RegExp. Expression to split the text field text into new tags. (default: /[,]/ [comma])grouping
:String. Character to group tags (a separator don't create a new tag when placed inside a group). (default: none)
// Tags separated by space, grouped by double-quotes with custom input name and class. $('.tagbox').tagbox({ separator: /\s/, grouping: '"', className: 'recipients', name: 'recipients[]' });
##Separators
You can customize the separator character. If you want space separated tags, just use:
$('.tagbox').tagbox({
separator: /\s/
});
The separator
parameter is a regular expression. We also support multiple separators, like:
$('.tagbox').tagbox({
separator: /[,; ]/
});
This way, we are splitting tags by ',' , ';' and space.
##Tag Groups
If you need tags grouped by quotes, just pass a string to the grouping
parameter. Let's say you want space-separated tags, but grouped by quotes:
$('.tagbox').tagbox({
separator: /\s/,
grouping: '"'
});
Now you can have tags like "New York" and "Central Park".
##Callbacks
We provide you the ability to hook custom events to the blur
, onkeyup
and onkeydown
from the options. These events are hooked before the plugin's blur, keyup and keydown events.
#Other uses
Use your creativity! Tagbox can be used in other kinds of user input, like contacts, product properties, etc.
#Contact