Skip to content

Latest commit

 

History

History
153 lines (106 loc) · 4.91 KB

README.md

File metadata and controls

153 lines (106 loc) · 4.91 KB
Raw

Bootstrap Tokenfield

![NPM version][npm-badge] ![Build status][travis-badge] [npm-badge]: https://badge.fury.io/js/bootstrap-tokenfield.png [travis-badge]: https://travis-ci.org/sliptree/bootstrap-tokenfield.png?branch=master

A jQuery tagging / tokenizer input plugin for Twitter's Bootstrap, by the guys from Sliptree

Check out the demo and docs

Installation

Requirements: jQuery 1.9+, Bootstrap 3+ (only CSS)

  1. Install via npm or bower (recommended) or manually download the package
  2. Include dist/bootstrap-tokenfield.js or dist/bootstrap-tokenfield.min.js in your HTML
  3. Include dist/css/bootstrap-tokenfield.css in your HTML

Usage

$('input').tokenfield()

Features

  • Copy & paste tokens with Ctrl+C and Ctrl+V
  • Keyboard navigation, delete tokens with keyboard (arrow keys, Shift + arrow keys)
  • Select specific tokens with Ctrl + click and Shift + click
  • Twitter Typeahead and jQuery UI Autocomplete support

FAQ

How can I prevent duplicate tokens from being entered?

You can use the tokenfield:createtoken event for that. Check the event.attrs property for token value and label, and the run your duplicate detection logic. If it's a duplicate token, simply do event.preventDefault().

Here's a simple example that checks if token's value is equal to any of the existing tokens' values.

$('#my-tokenfield').on('tokenfield:createtoken', function (event) {
	var existingTokens = $(this).tokenfield('getTokens');
	$.each(existingTokens, function(index, token) {
		if (token.value === event.attrs.value)
			event.preventDefault();
	});
});

And how about limiting tokens to my typeahead/autocomplete data?

Similarly, using tokenfield:createtoken, you can check to see if a token exists in your autocomplete/typeahead data. This example checks if the given token already exists and stops its entry if it doesn't.

$('#my-tokenfield').on('tokenfield:createtoken', function (event) {
	var available_tokens = bloodhound_tokens.index.datums
	var exists = true;
	$.each(available_tokens, function(index, token) {
		if (token.value === event.attrs.value)
			exists = false;
	});
	if(exists === true)
		event.preventDefault();
})

Changelog

See release notes

Previous releases:

0.10.0

  • Fixed: Entering a duplicate token does not submit the underlying form anymore
  • Fixed: Selecting a duplicate token from autocomplete or typeahead suggestions no longer clears the input
  • Improved: Trying to enter a duplicate tag now animates the existing tag for a little while
  • Improved: Tokenfield input has now autocomplete="off" to prevent browser-specific autocomplete suggestions
  • Changed: triggerKeys has been renamed to delimiter and accepts a single or an array of characters instead of character codes.

0.9.9-1

  • Fixed: setTokens now respects triggerKeys option

0.9.8

  • New: triggerKeys option
  • Fixed: Long placeholders are not being cut off anymore when initializing tokenfield with no tokens #37
  • Fixed: createTokensOnBlur no more breaks token editing #35

0.9.7 Valuable

  • Fixed: Twitter Typeahead valueKey support #18
  • Fixed: Removing multiple tokens returned wrong data #30
  • Fixed: If token is removed in beforeEdit event, no longer falls over #27, #28
  • Fixed: Change event was triggered on initialization #22
  • Fixed: When token is removed in tokenfield:preparetoken event, no longer tries to create a token
  • Fixed: Pressing comma key was not handled reliably
  • New: prevetDuplicateToken event
  • Improved: Typeahead integration
  • Improved: styling
  • Minor tweaks, fixes, improvements

0.9.5 Typeable

  • New: Twitter Typeahead support
  • New: When triggering 'change' event on original input, setTokens is now called. This allows you to update tokens externally.
  • Fixed: Nnput labels did not work with tokenfield
  • Fixed: Set correct input width on fixed-width inputs

0.9.2 Maintenance release

  • Many small fixes and improvements

0.9.0 Bootstrappable

  • New: Bootstrap 3 support
  • New: Input group support
  • New: Disable/enable tokenfield
  • New: Tokenfield is now responsive
  • Deprecated: Bootstrap 2 support

0.7.1

  • Fixed: pressing comma did not create a token in Firefox
  • Fixed: tokenfield('getTokensList') returned array instead of string

0.7.0 Autocompleted

  • New feature: jQuery UI Autocomplete support

0.6.7 Crossable

  • Fixed: Firefox close icon was misplaced
  • New: IE 8-10 support (both CSS and Javascript)

0.6.5 Shiftable

  • New feature: select specific tokens with Ctrl/Shift + click
  • New feature: select specific tokens with Shift + arrow keys
  • Internal API improvements

0.6 Editable

  • New feature: Edit existing tokens by double-clicking or pressing enter
  • A lot of improvements and bugfixes

0.5 Initial release