Try the demo: http://rfletcher.github.com/tagbox/demo/
Tagbox currently supports the following browsers:
- Microsoft Internet Explorer, version 7.0 and higher
- Mozilla Firefox 3.0 and higher
- Apple Safari 3.1 and higher
Include the Tagbox assets:
Add a text input to your page, with the tagbox class:
<input type="text" name="tags" class="tagbox" value="these, are, tags"/>
As soon as the browser is ready Tagbox will convert those inputs from text boxes to tag boxes, automatically converting any value into tags.
Tagbox requires Prototype.js 1.6+
Tagbox can be configured with these options:
- allow_duplicates : boolean, default: false
- Allow duplicate tags
- case_sensitive : boolean, default: false
- Pay attention to case when checking for duplicates. This option has no effect when allow_duplicates is true.
- delimiters : array, default: [ Event.KEY_COMMA, Event.KEY_RETURN ]
- An array of key codes which trigger the creation of a new tag from typed text.
- max_tags : number, default: null
- The maximum number of tags that can be entered.
- show_remove_links : boolean, default: false
- Add small 'x' links to each tag which, when clicked, remove that tag from the list.
- validation_function : Function, default = null
- A function which validates new input before adding it as a tag. It will be passed the String value as the only parameter, and should return a Boolean.
Tagbox fires custom events, which you may observe:
var tb = new TagBox( 'mytags' ); tb.observe( 'tagbox:focus', mycallbackfunc );
The Tagbox event methods simply wrap Prototype's. See the Prototype Event docs for detailed information.
- fires immediately after the tagbox loses the focus
- fires immediately after a tagbox gains the focus (i.e. is clicked on or tabbed into)
Building Tagbox from source
tagbox.js is generated from multiple source files in the src/ directory. To build Tagbox, you'll need:
From the root Tagbox directory, run:
- rake dist to generate dist/tagbox.js
- rake package to create a distribution tarball in the pkg/ directory
- new: added the max_tags option
- new: added the hint and hint_delay options
- new: added Tagbox.version
- new: added the allowed option
- new: original input's value is parsed into tags
- new: added the allow_duplicates option
- new: added the case_sensitive option
- new: added the delimiters option
- new: added the show_remove_links option
- new: added the validation_function option
- new: added the tagbox:focus event
- new: added the tagbox:blur event
Tagbox was heavily inspired by Guillermo Rauch's TextboxList for MooTools.