A repository of over 1000 quality jQuery plugins

jQuery Bootstrap Tokenfield

Bootstrap Tokenfield is a jQuery General Inputs plugin.

Created by Sliptree

A jQuery tag/token input plugin for Twitter’s Bootstrap, by the guys from Sliptree

Not what you're looking for? Click here to view more General Inputs jQuery plugins

Bootstrap Tokenfield

NPM version Build status

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



You might also like these other General Inputs jQuery Plugins

  • jquery.fajax

    Lightweight jQuery plugin for ajaxifying forms

  • validify.js

    simple and modern login form validation

  • toTextarea

    Makes a div act like a textarea to allow auto resizing and formatting options. Also allows drag and drop images […]