Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sliptree/bootstrap-tokenfield

A jQuery tag/token input plugin for Twitter's Bootstrap, by the guys from Sliptree
https://github.com/sliptree/bootstrap-tokenfield

Last synced: 3 months ago
JSON representation

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

Host: GitHub
URL: https://github.com/sliptree/bootstrap-tokenfield
Owner: sliptree
License: other
Archived: true
Created: 2013-07-26T14:01:52.000Z (over 11 years ago)
Default Branch: master
Last Pushed: 2020-09-28T05:59:24.000Z (about 4 years ago)
Last Synced: 2024-04-29T22:59:59.341Z (6 months ago)
Language: JavaScript
Homepage: http://sliptree.github.io/bootstrap-tokenfield/
Size: 568 KB
Stars: 861
Watchers: 37
Forks: 238
Open Issues: 165
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md

Awesome Lists containing this project

starred-awesome - bootstrap-tokenfield - A jQuery tag/token input plugin for Twitter's Bootstrap, by the guys from Sliptree (JavaScript)

README

        Bootstrap Tokenfield

====================

A jQuery tagging / tokenizer input plugin for Twitter's Bootstrap, by the guys from [Sliptree](https://sliptree.com)

Check out the [demo and docs](http://sliptree.github.io/bootstrap-tokenfield/)

# 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

```js	

$('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.

```js

$('#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.

```js

$('#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](https://github.com/sliptree/bootstrap-tokenfield/releases)

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