scratch – Blame information for rev 134
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
134 | office | 1 | Bootstrap Tokenfield |
2 | ==================== |
||
3 | [![NPM version][npm-badge]](http://badge.fury.io/js/bootstrap-tokenfield) |
||
4 | [![Build status][travis-badge]](https://travis-ci.org/sliptree/bootstrap-tokenfield) |
||
5 | [npm-badge]: https://badge.fury.io/js/bootstrap-tokenfield.png |
||
6 | [travis-badge]: https://travis-ci.org/sliptree/bootstrap-tokenfield.png?branch=master |
||
7 | |||
8 | A jQuery tagging / tokenizer input plugin for Twitter's Bootstrap, by the guys from [Sliptree](https://sliptree.com) |
||
9 | |||
10 | Check out the [demo and docs](http://sliptree.github.io/bootstrap-tokenfield/) |
||
11 | |||
12 | ### Installation |
||
13 | |||
14 | Requirements: jQuery 1.9+, Bootstrap 3+ (only CSS) |
||
15 | |||
16 | 1. Install via npm or bower (recommended) or manually download the package |
||
17 | 2. Include `dist/bootstrap-tokenfield.js` or `dist/bootstrap-tokenfield.min.js` in your HTML |
||
18 | 3. Include `dist/css/bootstrap-tokenfield.css` in your HTML |
||
19 | |||
20 | ### Usage |
||
21 | |||
22 | ```js |
||
23 | $('input').tokenfield() |
||
24 | ``` |
||
25 | |||
26 | ### Features |
||
27 | |||
28 | * Copy & paste tokens with Ctrl+C and Ctrl+V |
||
29 | * Keyboard navigation, delete tokens with keyboard (arrow keys, Shift + arrow keys) |
||
30 | * Select specific tokens with Ctrl + click and Shift + click |
||
31 | * Twitter Typeahead and jQuery UI Autocomplete support |
||
32 | |||
33 | ### FAQ |
||
34 | |||
35 | #### How can I prevent duplicate tokens from being entered? |
||
36 | |||
37 | You can use the `tokenfield:createtoken` event for that. Check the `event.attrs` property for token value and label, |
||
38 | and the run your duplicate detection logic. If it's a duplicate token, simply do `event.preventDefault()`. |
||
39 | |||
40 | Here's a simple example that checks if token's value is equal to any of the existing tokens' values. |
||
41 | |||
42 | ```js |
||
43 | $('#my-tokenfield').on('tokenfield:createtoken', function (event) { |
||
44 | var existingTokens = $(this).tokenfield('getTokens'); |
||
45 | $.each(existingTokens, function(index, token) { |
||
46 | if (token.value === event.attrs.value) |
||
47 | event.preventDefault(); |
||
48 | }); |
||
49 | }); |
||
50 | ``` |
||
51 | |||
52 | #### And how about limiting tokens to my typeahead/autocomplete data? |
||
53 | |||
54 | Similarly, using `tokenfield:createtoken`, you can check to see if a token exists in your autocomplete/typeahead |
||
55 | data. This example checks if the given token already exists and stops its entry if it doesn't. |
||
56 | |||
57 | ```js |
||
58 | $('#my-tokenfield').on('tokenfield:createtoken', function (event) { |
||
59 | var available_tokens = bloodhound_tokens.index.datums |
||
60 | var exists = true; |
||
61 | $.each(available_tokens, function(index, token) { |
||
62 | if (token.value === event.attrs.value) |
||
63 | exists = false; |
||
64 | }); |
||
65 | if(exists === true) |
||
66 | event.preventDefault(); |
||
67 | }) |
||
68 | ``` |
||
69 | |||
70 | |||
71 | |||
72 | ### Changelog |
||
73 | |||
74 | See [release notes](https://github.com/sliptree/bootstrap-tokenfield/releases) |
||
75 | |||
76 | Previous releases: |
||
77 | |||
78 | 0.10.0 |
||
79 | |||
80 | * Fixed: Entering a duplicate token does not submit the underlying form anymore |
||
81 | * Fixed: Selecting a duplicate token from autocomplete or typeahead suggestions no longer clears the input |
||
82 | * Improved: Trying to enter a duplicate tag now animates the existing tag for a little while |
||
83 | * Improved: Tokenfield input has now `autocomplete="off"` to prevent browser-specific autocomplete suggestions |
||
84 | * Changed: `triggerKeys` has been renamed to `delimiter` and accepts a single or an array of characters instead of character codes. |
||
85 | |||
86 | 0.9.9-1 |
||
87 | |||
88 | * Fixed: setTokens now respects `triggerKeys` option |
||
89 | |||
90 | 0.9.8 |
||
91 | |||
92 | * New: `triggerKeys` option |
||
93 | * Fixed: Long placeholders are not being cut off anymore when initializing tokenfield with no tokens #37 |
||
94 | * Fixed: createTokensOnBlur no more breaks token editing #35 |
||
95 | |||
96 | 0.9.7 Valuable |
||
97 | |||
98 | * Fixed: Twitter Typeahead valueKey support #18 |
||
99 | * Fixed: Removing multiple tokens returned wrong data #30 |
||
100 | * Fixed: If token is removed in beforeEdit event, no longer falls over #27, #28 |
||
101 | * Fixed: Change event was triggered on initialization #22 |
||
102 | * Fixed: When token is removed in tokenfield:preparetoken event, no longer tries to create a token |
||
103 | * Fixed: Pressing comma key was not handled reliably |
||
104 | * New: `prevetDuplicateToken` event |
||
105 | * Improved: Typeahead integration |
||
106 | * Improved: styling |
||
107 | * Minor tweaks, fixes, improvements |
||
108 | |||
109 | 0.9.5 Typeable |
||
110 | |||
111 | * New: Twitter Typeahead support |
||
112 | * New: When triggering 'change' event on original input, setTokens is now called. This allows you to update tokens externally. |
||
113 | * Fixed: Nnput labels did not work with tokenfield |
||
114 | * Fixed: Set correct input width on fixed-width inputs |
||
115 | |||
116 | 0.9.2 Maintenance release |
||
117 | |||
118 | * Many small fixes and improvements |
||
119 | |||
120 | 0.9.0 Bootstrappable |
||
121 | |||
122 | * New: Bootstrap 3 support |
||
123 | * New: Input group support |
||
124 | * New: Disable/enable tokenfield |
||
125 | * New: Tokenfield is now responsive |
||
126 | * Deprecated: Bootstrap 2 support |
||
127 | |||
128 | 0.7.1 |
||
129 | |||
130 | * Fixed: pressing comma did not create a token in Firefox |
||
131 | * Fixed: tokenfield('getTokensList') returned array instead of string |
||
132 | |||
133 | 0.7.0 Autocompleted |
||
134 | |||
135 | * New feature: jQuery UI Autocomplete support |
||
136 | |||
137 | 0.6.7 Crossable |
||
138 | |||
139 | * Fixed: Firefox close icon was misplaced |
||
140 | * New: IE 8-10 support (both CSS and Javascript) |
||
141 | |||
142 | 0.6.5 Shiftable |
||
143 | |||
144 | * New feature: select specific tokens with Ctrl/Shift + click |
||
145 | * New feature: select specific tokens with Shift + arrow keys |
||
146 | * Internal API improvements |
||
147 | |||
148 | 0.6 Editable |
||
149 | |||
150 | * New feature: Edit existing tokens by double-clicking or pressing enter |
||
151 | * A lot of improvements and bugfixes |
||
152 | |||
153 | 0.5 Initial release |