search

sliptree / bootstrap-tokenfield

A jQuery tag/token input plugin for Twitter's Bootstrap, by the guys from Sliptree
http://sliptree.github.io/bootstrap-tokenfield/
Other
859 stars 238 forks source link

readme

Bootstrap Tokenfield

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

Check out the demo and docs

This project is no longer maintained!

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

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

0.9.9-1

0.9.8

0.9.7 Valuable

0.9.5 Typeable

0.9.2 Maintenance release

0.9.0 Bootstrappable

0.7.1

0.7.0 Autocompleted

0.6.7 Crossable

0.6.5 Shiftable

0.6 Editable

0.5 Initial release