TagInput.js

Demo

HTML Code

<input id="Keywords" name="Keywords"
       type="text"
       data-TagInput
       data-Glue=","
       data-MinLength="1"
       data-MaxLength="16"
       data-LabelAnimationClass="Material"
       value="HTML,CSS"
       required>

CSS Code

.TagInput label {
    color: #888888;
    transform-origin: 0 0 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    will-change: transform;
}

.TagInput label.Material {
    -webkit-transform: scale(0.8) translate3d(0, -1.7em, 0);
    -moz-transform: scale(0.8) translate3d(0, -1.7em, 0);
    -ms-transform: scale(0.8) translate3d(0, -1.7em, 0);
    -o-transform: scale(0.8) translate3d(0, -1.7em, 0);
    transform: scale(0.8) translate3d(0, -1.7em, 0);
}

.TagInput label is a required prefix for custom CSS style to properly override the defaults.

Options

Option	Description	Default
TagInput	A boolean attribute given to the `input` element which tells TagInput.js to automatically apply $.fn.TagInput() on the target element.	`true`
Glue	A substring that is used to bind all the tags into a string which is assigned to the original input element which can be further processed by backend handling the form. It cannot be `SPACE`.	`,`
RemoveIcon	Class(es) which is(are) applied to a `span` element to act as Remove Tag Button.	`glyphicon` `glyphicon-remove`
MinLength	Minimum number (>= 1) of characters required for a valid Tag.	`1`
MaxLength	Maximum number of characters a Tag can have.	`No Limit`
LabelAnimationClass	A class which is added to the associated label when the TagInput is focused or is non empty.	`Hide`

All the HTML element attributes are preceded by data- substring.

Methods

Method	Parameter	Return	Description
ToString	`null`	`string`	Returns a string formed by joining Tags with the Glue.
UpdateValue	`null`	`string`	Updates the value of the TagInput element, i.e. it joins all Tags using Glue and assigns it to the TagInput element. It returns the updated value.
AddTag	`string`	`boolean`	Adds a Tag with the text supplied and returns `true` if successful else `false`. If the text contains Glue then it is replaced by Space. It searches for a Tag with exact matching text, if found the Tag is not added.
RemoveTag	`jQuery` [, `number` ]	`boolean`	Removes the Tag specified by the jQuery object of that Tag. If the index of the Tag in the TagArray is available it can be passed as the second parameter, in that case it is not calculated using the element provided. It returns `true` on success and `false` on failure.
GetArray	`null`	`array`	Returns TagArray which is an array of `objects` with following properties : Text : `string` $Tag : `jQuery` (object of the target Tag)
GetTextArray	`null`	`array`	Returns Text only array of all the Tags.
GetTagCount	`null`	`number`	Returns the number of Tags.
ConvertToHiddenInput	`null`	`string`	Creates an array of hidden input based on the Tags with the name attribute as that of the original input element (with additional array sign; `[]`) and disables the original input element so that backend scripts can easily receive an array of all the Tags. This function is to be run before form is submitted using `onSubmit` event. It returns the name attribute given to hidden inputs.
Reset	`null`	`TagInput`	Clears the TagInput element completely for the next time input.

These functions are accessible through $Input.data('TagInput'). Also if you want to alter private functions they are accessible through Private property.

Events

Event	Extra Parameter	Description
TagInput:AddTag	`array`, `jQuery`, `string`	This event is fired when `AddTag()` method is called. `TagArray`, `$Tag` and `Text` are extra parameters, where `$Tag` is `jQuery` object of the Tag added and `Text` is it's title as `string`.
TagInput:RemoveTag	`array`, `string`	This event is fired when `RemoveTag()` method is called. `TagArray` and `Text` are extra parameters.

TagInput:UpdateValue event is removed in 1.1.

Dependencies

Created By Divya Mamgai

TagInput.js 1.1

Documentation

HTML Code

CSS Code

jQuery (>= 1.4) jQuery 3.0 Ready (Slim Compatible)