npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

bootstrap-tokenfield-jquery3

v0.13.1

Published

Advanced tagging/tokenizing plugin for input fields with a focus on keyboard and copy-paste support.

Downloads

173

Readme

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