Skip to content

rfletcher/tagbox

Folders and files

NameName
Last commit message
Last commit date
Mar 12, 2009
Mar 6, 2009
May 6, 2009
Mar 18, 2009
Mar 17, 2009
Mar 17, 2009
Mar 17, 2009
Mar 17, 2009
Mar 17, 2009

Repository files navigation

Tagbox

Tagbox is an unobtrusive javascript library which provides a multi-value text input.

Try the demo: http://rfletcher.github.com/tagbox/demo/

Supported Browsers

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

Using Tagbox

Include the Tagbox assets:

<link rel="stylesheet" href="tagbox/assets/tagbox.css" type="text/css" media="screen"/>
<script src="tagbox/dist/tagbox.js" type="text/javascript"></script>

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.

Requirements

Tagbox requires Prototype.js 1.6+

Options

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.

Custom Events

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.

Events

tagbox:blur
fires immediately after the tagbox loses the focus
tagbox: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

Changelog

0.1+

  • new: added the max_tags option
  • new: added the hint and hint_delay options
  • new: added Tagbox.version
  • new: added the allowed option

0.1

  • 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

Credits

Tagbox was heavily inspired by Guillermo Rauch's TextboxList for MooTools.

About

An multi-value text input for prototype.js

Resources

Stars

Watchers

Forks

Packages

No packages published