Bootstrap Tags Input

jQuery plugin providing a Bootstrap user interface for managing tags

How To

Step 1: Include LambdaEx Framework in Logi Info Application. Include LambdaEx Framework in Logi Info Application.

Step 2: Include Bootstrap Tags Input in Logi Info Application Include Bootstrap Tags Input in Logi Info Application

Step 3: Include northwind.xml source files in Logi Info Application Include northwind.xml source files in Logi Info Application

Features

Objects as tags
True multi value
Typeahead
Integration with jQuery & Knockout

Simple Example

Add data-role="tagsinput" to your input field to automatically change it to a tags input field.

<InputText DefaultValue="Amsterdam,Washington,Sydney,Beijing,Cairo" ID="inpWithTags" />

/*START INCLUDE SCRIPT ELEMENT...*/
$('#inpWithTags').tagsinput({
	tagClass: 'badge badge-info'
});
/*...END INCLUDE SCRIPT*/

Typeahead

Typeahead is not included in Bootstrap, so you'll have to include your own typeahead.js library. An example of using this is shown below.

<InputText ID="inpTypeAhead" />

/*START INCLUDE SCRIPT ELEMENT...*/
var cityData = [{'value':1,'text':'Amsterdam'},
		{'value':4,'text':'Washington'},
		{'value':7,'text':'Sydney'},
		{'value':10,'text':'Beijing'},
		{'value':13,'text':'Cairo'}];
				
var cities = new Bloodhound({
	local: cityData,
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
});
cities.initialize();

$('#inpTypeAhead').tagsinput({  
  tagClass: 'badge badge-primary',
  typeaheadjs: {
    name: 'citynames',
    displayKey: 'text',
    valueKey: 'text',
    source: cities.ttAdapter()
  }
});
/*...END INCLUDE SCRIPT*/

Options

Param	Description
`tagClass`:	Classname for the tags, or a function returning a classname
`itemValue`:	When adding objects as tags, itemValue must be set to the name of the property containing the item's value, or a function returning an item's value.
`itemText`:	When adding objects as tags, you can set itemText to the name of the property of item to use for a its tag's text. You may also provide a function which returns an item's value. When this options is not set, the value of <code>itemValue</code> will be used.
`confirmKeys`:	Array of keycodes which will add a tag when typing in the input. (default: [13, 188], which are ENTER and comma)
`maxTags`:	When set, no more than the given number of tags are allowed to add (default: undefined). When maxTags is reached, a class 'bootstrap-tagsinput-max' is placed on the tagsinput element.
`maxChars`:	Defines the maximum length of a single tag. (default: undefined)
`cancelConfirmKeysOnEmpty`:	Boolean value controlling whether form submissions get processed when pressing enter in a field converted to a tagsinput (default: false).
`onTagExists`:	Function invoked when trying to add an item which allready exists. By default, the existing tag hides and fades in.
`trimValue`:	When true, automatically removes all whitespace around tags. (default: false)
`allowDuplicates`:	When true, the same tag can be added multiple times. (default: false)
`focusClass`:	When the input container has focus, the class specified by this config option will be applied to the container
`freeInput`:	Allow creating tags which are not returned by typeahead's source (default: true)
`typeahead`:	Object containing typeahead specific options
`source`:	An array (or function returning a promise or array), which will be used as source for a typeahead.

Methods

Param	Description
`add`	Adds a tag
`remove`	Removes a tag
`removeAll`	Removes all tags
`focus`	Sets focus in the tagsinput
`input`	Returns the tagsinput's internal <input />, which is used for adding tags. You could use this to add your own typeahead behaviour for example.
`refresh`	Refreshes the tags input UI. This might be usefull when you're adding objects as tags. When an object's text changes, you'll have to refresh to update the matching tag's text.
`destroy`	Removes tagsinput behaviour

//change the selected date range of that picker
$('input').tagsinput('add', { id: 1, text: 'some tag' });
$('input').tagsinput('remove', { id: 1, text: 'some tag' });

Events

Event	Description
`itemAddedOnInit`	During initialization, pre-defined tags being added will cause this event to be triggered.
`beforeItemAdd`	Triggered just before an item gets added.
`itemAdded`	Triggered just after an item got added.
`beforeItemRemove`	Triggered just before an item gets removed.
`itemRemoved`	Triggered just after an item got removed.

$('input').on('itemAddedOnInit', function(event) {
  // event.item: contains the item
});