Tags

Tags is a user friendly handler for a tags/tokens input field. It initializes over a normal input field that contains a coma separated tags list and makes a more user-friendly and css customizable widget out of it.

Get the latest version right here

All the source code of the project is available under terms of the MIT license

http://github.com/rightjs/rightjs-ui/tree/master/src/tags/

For some standard usage examples see the demo page

Index

top ↑Features List

  • CSS-customizable interface
  • Automatic initialization
  • Simple usage
  • Small size (3.2k gzipped with styles)

top ↑Usage Basics

Usage of this widget is very simple, just include one of the files above onto your page and then either use RightJS standard auto-initialization feature, like that

<input type="text" value="one, two, three" data-tags="{}" />

Or, initialize a tags widget over a normal input field programmatically

<input type="text" value="one, two, three" id="my-tags-field" />

var tags = new Tags('my-tags-field', {
// options in here
});

If you need the autocompletion feature, just specify the list of known tags in the standard options

<input type="text" data-tags="{tags: ['one', 'two', 'three']}" />

Or even without options, just with a plain list

<input type="text" data-tags="['one', 'two', 'three']" />

All the tags found in the value attribute will be automatically added to the list.

top ↑Options List

You can use the following list of options with this widget

NameDefaultDescription
tags[]the tags list
verticalfalseuse a vertical tags list
allowNewtrueallow new tags to be created
nocasetruecase insensitive mode
autocompletetrueautocomplete the user’s input
separator’,’the tokens separator

You can specify those options either with the data-tags attribute or with the Tags class constructor, or change them globally in the Tags.Options object

top ↑Events List

In additional to the standard Input class events, the Tags class also supports the following events

NameDescription
addwhen a new tag was added
removewhen a tag was removed

Both those events will have an additional attribute called tag, which will contain the tag text

top ↑Style Alterations

The Tags widget has a pretty simple HTML construction

<input type="text" class="rui-tags" />
<div class="rui-tags">
<ul class="list">
<li><div class="text">Tag 1</div><div class="close">&times;</div></li>
<li><div class="text">Tag 2</div><div class="close">&times;</div></li>
<li><div class="text">Tag 3</div><div class="close">&times;</div></li>

<input type="text" />
</ul>

<ul class="rui-dd-menu">
<li>Tag 1</li>
<li>Tag 2</li>
<li>Tag 3</li>
</ul>
</div>

Feel free to alter it as you need.