scratch – Blame information for rev 125

Subversion Repositories:
Rev:
Rev Author Line No. Line
125 office 1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Bootstrap Tags Input</title>
5 <meta name="robots" content="index, follow" />
6 <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
7  
8 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
9 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap-theme.min.css">
10 <link rel="stylesheet" href="../dist/bootstrap-tagsinput.css">
11 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rainbow/1.2.0/themes/github.css">
12 <link rel="stylesheet" href="assets/app.css">
13 <script>
14 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
15 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
16 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
17 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
18  
19 ga('create', 'UA-42755476-1', 'bootstrap-tagsinput.github.io');
20 ga('send', 'pageview');
21 </script>
22 </head>
23 <body>
24 <div id="fb-root"></div>
25 <div class="jumbotron">
26 <div class="container">
27 <h1>Bootstrap Tags Input</h1>
28 <p>jQuery plugin providing a Twitter Bootstrap user interface for managing tags</p>
29 <p>
30 <a class="btn btn-default" role="button" href="https://github.com/bootstrap-tagsinput/bootstrap-tagsinput">Code on Github</a>
31 <a class="btn btn-default" role="button" href="bootstrap-2.3.2.html">Bootstrap 2.3.2</a>
32 <a class="btn btn-primary" role="button" href="https://codeload.github.com/bootstrap-tagsinput/bootstrap-tagsinput/zip/latest">Download</a>
33 </p>
34 <p>
35 <ul class="list-inline">
36 <li>
37 <iframe src="//ghbtns.com/github-btn.html?user=bootstrap-tagsinput&repo=bootstrap-tagsinput&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
38 </li>
39 <li>
40 <iframe src="//ghbtns.com/github-btn.html?user=bootstrap-tagsinput&repo=bootstrap-tagsinput&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
41 </li>
42 <li>
43 <a href="https://twitter.com/share" class="navbar-link twitter-share-button" data-hashtags="bootstraptagsinput">Tweet</a>
44 <script>!function (d, s, id) {
45 var js, fjs = d.getElementsByTagName(s)[0];
46 if (!d.getElementById(id)) {
47 js = d.createElement(s);
48 js.id = id;
49 js.src = "//platform.twitter.com/widgets.js";
50 fjs.parentNode.insertBefore(js, fjs);
51 }
52 }(document, "script", "twitter-wjs");</script>
53 </li>
54 <li>
55 <a class="navbar-link g-plusone" data-size="medium"></a>
56 <script type="text/javascript">
57 (function () {
58 var po = document.createElement('script');
59 po.type = 'text/javascript';
60 po.async = true;
61 po.src = 'https://apis.google.com/js/plusone.js';
62 var s = document.getElementsByTagName('script')[0];
63 s.parentNode.insertBefore(po, s);
64 })();
65 </script>
66 </li>
67 </ul>
68 </p>
69 </div>
70 </div>
71 <div class="container">
72 <section id="examples">
73 <div class="page-header">
74 <h2>Examples</h2>
75 </div>
76  
77 <div class="example example_markup">
78 <h3>Markup</h3>
79 <p>Just add <code>data-role="tagsinput"</code> to your input field to automatically change it to a tags input field.</p>
80 <div class="bs-example">
81 <input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" />
82 </div>
83 <div class="accordion">
84 <div class="accordion-group">
85 <div class="accordion-heading">
86 <a class="accordion-toggle" data-toggle="collapse" href="#accordion_example_markup">
87 Show code
88 </a>
89 </div>
90 <div id="accordion_example_markup" class="accordion-body collapse">
91 <div class="accordion-inner highlight">
92 <pre><code data-language="html">&lt;input type=&quot;text&quot; value=&quot;Amsterdam,Washington,Sydney,Beijing,Cairo&quot; data-role=&quot;tagsinput&quot; /&gt;</code></pre>
93 </div>
94 </div>
95 </div>
96 </div>
97 <table class="table table-bordered table-condensed"><thead><tr><th>statement</th><th>returns</th></tr></thead><tbody><tr><td><code>$("input").val()</code></td><td><pre class="val"><code data-language="javascript"></code></pre></td></tr><tr><td><code>$("input").tagsinput('items')</code></td><td><pre class="items"><code data-language="javascript"></code></pre></td></tr></tbody></table>
98 </div>
99  
100 <div class="example example_multivalue">
101 <h3>True multi value</h3>
102 <p>
103 Use a <code>&lt;select multiple /&gt;</code> as your input element for a tags input, to gain true multivalue support. Instead of a comma separated string, the values will be set in an array. Existing <code>&lt;option /&gt;</code> elements will automatically be set as tags. This makes it also possible to create tags containing a comma.
104 </p>
105 <div class="bs-example">
106 <select multiple data-role="tagsinput">
107 <option value="Amsterdam">Amsterdam</option>
108 <option value="Washington">Washington</option>
109 <option value="Sydney">Sydney</option>
110 <option value="Beijing">Beijing</option>
111 <option value="Cairo">Cairo</option>
112 </select>
113 </div>
114 <div class="accordion ">
115 <div class="accordion-group">
116 <div class="accordion-heading">
117 <a class="accordion-toggle" data-toggle="collapse" href="#example_multivalue">
118 Show code
119 </a>
120 </div>
121 <div id="example_multivalue" class="accordion-body collapse">
122 <div class="accordion-inner">
123 <pre><code data-language="html">&lt;select multiple data-role="tagsinput"&gt;
124 &lt;option value="Amsterdam"&gt;Amsterdam&lt;/option&gt;
125 &lt;option value="Washington"&gt;Washington&lt;/option&gt;
126 &lt;option value="Sydney"&gt;Sydney&lt;/option&gt;
127 &lt;option value="Beijing"&gt;Beijing&lt;/option&gt;
128 &lt;option value="Cairo"&gt;Cairo&lt;/option&gt;
129 &lt;/select&gt;</code></pre>
130 </div>
131 </div>
132 </div>
133 </div>
134 <table class="table table-bordered table-condensed"><thead><tr><th>statement</th><th>returns</th></tr></thead><tbody><tr><td><code>$("select").val()</code></td><td><pre class="val"><code data-language="javascript"></code></pre></td></tr><tr><td><code>$("select").tagsinput('items')</code></td><td><pre class="items"><code data-language="javascript"></code></pre></td></tr></tbody></table>
135 </div>
136  
137 <div class="example example_typeahead">
138 <h3>Typeahead</h3>
139 Typeahead is not included in Bootstrap 3, so you'll have to include your own typeahead library. I'd recommed <a href="http://twitter.github.io/typeahead.js/">typeahead.js</a>. An example of using this is shown below.
140  
141 <div class="bs-example">
142 <input type="text" value="Amsterdam,Washington" />
143 </div>
144 <div class="accordion ">
145 <div class="accordion-group">
146 <div class="accordion-heading">
147 <a class="accordion-toggle" data-toggle="collapse"href="#example_typeahead">
148 Show code
149 </a>
150 </div>
151 <div id="example_typeahead" class="accordion-body collapse">
152 <div class="accordion-inner">
153 <pre><code data-language="html">&lt;input type=&quot;text&quot; value=&quot;Amsterdam,Washington&quot; data-role=&quot;tagsinput&quot; /&gt;
154 &lt;script&gt;
155 var citynames = new Bloodhound({
156 datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
157 queryTokenizer: Bloodhound.tokenizers.whitespace,
158 prefetch: {
159 url: 'assets/citynames.json',
160 filter: function(list) {
161 return $.map(list, function(cityname) {
162 return { name: cityname }; });
163 }
164 }
165 });
166 citynames.initialize();
167  
168 $('input').tagsinput({
169 typeaheadjs: {
170 name: 'citynames',
171 displayKey: 'name',
172 valueKey: 'name',
173 source: citynames.ttAdapter()
174 }
175 });
176 &lt;/script&gt;</code></pre>
177 </div>
178 </div>
179 </div>
180 </div>
181 <table class="table table-bordered table-condensed"><thead><tr><th>statement</th><th>returns</th></tr></thead><tbody><tr><td><code>$("input").val()</code></td><td><pre class="val"><code data-language="javascript"></code></pre></td></tr><tr><td><code>$("input").tagsinput('items')</code></td><td><pre class="items"><code data-language="javascript"></code></pre></td></tr></tbody></table>
182 </div>
183  
184 <div class="example example_objects_as_tags">
185 <h3>Objects as tags</h3>
186 <p>
187 Instead of just adding strings as tags, bind objects to your tags. This makes it possible to set id values in your input field's value, instead of just the tag's text.
188 </p>
189 <div class="bs-example">
190 <input type="text" />
191 </div>
192 <div class="accordion">
193 <div class="accordion-group">
194 <div class="accordion-heading">
195 <a class="accordion-toggle" data-toggle="collapse" href="#accordion_example_objects_as_tags">
196 Show code
197 </a>
198 </div>
199 <div id="accordion_example_objects_as_tags" class="accordion-body collapse">
200 <div class="accordion-inner">
201 <pre><code data-language="html">&lt;input type=&quot;text&quot; /&gt;
202 &lt;script&gt;
203 var cities = new Bloodhound({
204 datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
205 queryTokenizer: Bloodhound.tokenizers.whitespace,
206 prefetch: 'assets/cities.json'
207 });
208 cities.initialize();
209  
210 var elt = $('input');
211 elt.tagsinput({
212 itemValue: 'value',
213 itemText: 'text',
214 typeaheadjs: {
215 name: 'cities',
216 displayKey: 'text',
217 source: cities.ttAdapter()
218 }
219 });
220 elt.tagsinput('add', { "value": 1 , "text": "Amsterdam" , "continent": "Europe" });
221 elt.tagsinput('add', { "value": 4 , "text": "Washington" , "continent": "America" });
222 elt.tagsinput('add', { "value": 7 , "text": "Sydney" , "continent": "Australia" });
223 elt.tagsinput('add', { "value": 10, "text": "Beijing" , "continent": "Asia" });
224 elt.tagsinput('add', { "value": 13, "text": "Cairo" , "continent": "Africa" });
225 &lt;/script&gt;</code></pre>
226 </div>
227 </div>
228 </div>
229 </div>
230 <table class="table table-bordered table-condensed"><thead><tr><th>statement</th><th>returns</th></tr></thead><tbody><tr><td><code>$("input").val()</code></td><td><pre class="val"><code data-language="javascript"></code></pre></td></tr><tr><td><code>$("input").tagsinput('items')</code></td><td><pre class="items"><code data-language="javascript"></code></pre></td></tr></tbody></table>
231 </div>
232  
233 <div class="example example_tagclass">
234 <h3>Categorizing tags</h3>
235 <p>
236 You can set a fixed css class for your tags, or determine dynamically by providing a custom function.
237 </p>
238 <div class="bs-example">
239 <input type="text" />
240 </div>
241 <div class="accordion">
242 <div class="accordion-group">
243 <div class="accordion-heading">
244 <a class="accordion-toggle" data-toggle="collapse" href="#accordion_example_tagclass">
245 Show code
246 </a>
247 </div>
248 <div id="accordion_example_tagclass" class="accordion-body collapse">
249 <div class="accordion-inner">
250 <pre><code data-language="html">&lt;input type=&quot;text&quot; /&gt;
251 &lt;script&gt;
252 var cities = new Bloodhound({
253 datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
254 queryTokenizer: Bloodhound.tokenizers.whitespace,
255 prefetch: 'assets/cities.json'
256 });
257 cities.initialize();
258  
259 var elt = $('input');
260 elt.tagsinput({
261 tagClass: function(item) {
262 switch (item.continent) {
263 case 'Europe' : return 'label label-primary';
264 case 'America' : return 'label label-danger label-important';
265 case 'Australia': return 'label label-success';
266 case 'Africa' : return 'label label-default';
267 case 'Asia' : return 'label label-warning';
268 }
269 },
270 itemValue: 'value',
271 itemText: 'text',
272 typeaheadjs: {
273 name: 'cities',
274 displayKey: 'text',
275 source: cities.ttAdapter()
276 }
277 });
278 elt.tagsinput('add', { "value": 1 , "text": "Amsterdam" , "continent": "Europe" });
279 elt.tagsinput('add', { "value": 4 , "text": "Washington" , "continent": "America" });
280 elt.tagsinput('add', { "value": 7 , "text": "Sydney" , "continent": "Australia" });
281 elt.tagsinput('add', { "value": 10, "text": "Beijing" , "continent": "Asia" });
282 elt.tagsinput('add', { "value": 13, "text": "Cairo" , "continent": "Africa" });
283 &lt;/script&gt;</code></pre>
284 </div>
285 </div>
286 </div>
287 </div>
288 <table class="table table-bordered table-condensed"><thead><tr><th>statement</th><th>returns</th></tr></thead><tbody><tr><td><code>$("input").val()</code></td><td><pre class="val"><code data-language="javascript"></code></pre></td></tr><tr><td><code>$("input").tagsinput('items')</code></td><td><pre class="items"><code data-language="javascript"></code></pre></td></tr></tbody></table>
289 </div>
290  
291 <!-- div id="angular" class="example example_angular" ng-app="AngularExample" ng-controller="CityTagsInputController">
292 <h3>AngularJS support</h3>
293 <p>
294 Include <code>bootstrap-tagsinput-angular.js</code> and register the 'bootstrap-tagsinput' in your Angular JS application to use the bootstrap-tagsinput directive.
295 </p>
296 <div class="bs-example">
297 <bootstrap-tagsinput
298 ng-model="cities"
299 typeahead-source="queryCities"
300 tagclass="getTagClass"
301 itemvalue="value"
302 itemtext="text">
303 </bootstrap-tagsinput>
304 </div>
305 <div class="accordion">
306 <div class="accordion-group">
307 <div class="accordion-heading">
308 <a class="accordion-toggle" data-toggle="collapse" href="#example_angular">
309 Show code
310 </a>
311 </div>
312 <div id="example_angular" class="accordion-body collapse">
313 <div class="accordion-inner">
314 <pre><code data-language="html">&lt;bootstrap-tagsinput
315 ng-model="cities"
316 typeahead-source="queryCities"
317 tagclass="getTagClass"
318 itemvalue="value"
319 itemtext="text"&gt;
320 &lt;/bootstrap-tagsinput&gt;
321  
322 &lt;script&gt;
323 angular.module('AngularExample', ['bootstrap-tagsinput'])
324 .controller('CityTagsInputController',
325 function CityTagsInputController($scope) {
326 // Init with some cities
327 $scope.cities = [
328 { "value": 1 , "text": "Amsterdam" , "continent": "Europe" },
329 { "value": 4 , "text": "Washington" , "continent": "America" },
330 { "value": 7 , "text": "Sydney" , "continent": "Australia" },
331 { "value": 10, "text": "Beijing" , "continent": "Asia" },
332 { "value": 13, "text": "Cairo" , "continent": "Africa" }
333 ];
334  
335 $scope.queryCities = function(query) {
336 return $http.get('cities.json');
337 };
338  
339 $scope.getTagClass = function(city) {
340 switch (city.continent) {
341 case 'Europe' : return 'badge badge-info';
342 case 'America' : return 'label label-important';
343 case 'Australia': return 'badge badge-success';
344 case 'Africa' : return 'label label-inverse';
345 case 'Asia' : return 'badge badge-warning';
346 }
347 };
348 }
349 );
350 &lt;/script&gt;</code></pre>
351 </div>
352 </div>
353 </div>
354 </div>
355 <table class="table table-bordered table-condensed">
356 <thead>
357 <tr><th>statement</th><th>returns</th></tr>
358 </thead>
359 <tbody>
360 <tr><td><code>$scope.cities</code></td><td><pre class="items"><code data-language="javascript"></code></pre>{{cities}}</td></tr>
361 <tr><td><code>$("select").val()</code></td><td><pre class="val"><code data-language="javascript"></code></pre></td></tr>
362 <tr><td><code>$("select").tagsinput('items')</code></td><td><pre class="items"><code data-language="javascript"></code></pre></td></tr>
363 </tbody>
364 </table>
365 </div>
366 </section -->
367  
368 <section id="options">
369 <div class="page-header">
370 <h2>Options</h2>
371 </div>
372 <table class="table table-bordered table-condensed">
373 <thead>
374 <tr>
375 <th colspan="2">option</th>
376 <th>description</th>
377 </tr>
378 </thead>
379 <tbody>
380 <tr>
381 <td colspan="2"><code>tagClass</code></td>
382 <td>
383 <p>Classname for the tags, or a function returning a classname</p>
384 <pre><code data-language="javascript">$('input').tagsinput({
385 tagClass: 'big'
386 });</code></pre>
387 <pre><code data-language="javascript">$('input').tagsinput({
388 tagClass: function(item) {
389 return (item.length > 10 ? 'big' : 'small');
390 }
391 });</code></pre>
392 </td>
393 </tr>
394 <tr>
395 <td colspan="2"><code>itemValue</code></td>
396 <td>
397 <p>When adding objects as tags, itemValue <em>must</em> be set to the name of the property containing the item's value, or a function returning an item's value.</p>
398 <pre><code data-language="javascript">$('input').tagsinput({
399 itemValue: 'id'
400 });</code></pre>
401 <pre><code data-language="javascript">$('input').tagsinput({
402 itemValue: function(item) {
403 return item.id;
404 }
405 });</code></pre>
406 </td>
407 </tr>
408 <tr>
409 <td colspan="2"><code>itemText</code></td>
410 <td>
411 <p>When adding objects as tags, you can set itemText to the name of the property of item to use for a its tag's text. You may also provide a function which returns an item's value. When this options is not set, the value of <code>itemValue</code> will be used.
412  
413  
414 <pre><code data-language="javascript">$('input').tagsinput({
415 itemText: 'label'
416 });</code></pre>
417 <pre><code data-language="javascript">$('input').tagsinput({
418 itemText: function(item) {
419 return item.label;
420 }
421 });</code></pre>
422 </td>
423 </tr>
424 <tr>
425 <td colspan="2"><code>confirmKeys</code></td>
426 <td>
427 <p>Array of keycodes which will add a tag when typing in the input. (default: [13, 188], which are ENTER and comma)</p>
428 <pre><code data-language="javascript">$('input').tagsinput({
429 confirmKeys: [13, 44]
430 });</code></pre>
431 </td>
432 </tr>
433 <tr>
434 <td colspan="2"><code>maxTags</code></td>
435 <td>
436 <p>When set, no more than the given number of tags are allowed to add (default: undefined). When maxTags is reached, a class 'bootstrap-tagsinput-max' is placed on the tagsinput element.</p>
437 <pre><code data-language="javascript">$('input').tagsinput({
438 maxTags: 3
439 });</code></pre>
440 </td>
441 </tr>
442 <tr>
443 <td colspan="2"><code>maxChars</code></td>
444 <td>
445 <p>Defines the maximum length of a single tag. (default: undefined)</p>
446 <pre><code data-language="javascript">$('input').tagsinput({
447 maxChars: 8
448 });</code></pre>
449 </td>
450 </tr>
451 <tr>
452 <td colspan="2"><code>trimValue</code></td>
453 <td>
454 <p>When true, automatically removes all whitespace around tags. (default: false)</p>
455 <pre><code data-language="javascript">$('input').tagsinput({
456 trimValue: true
457 });</code></pre>
458 </td>
459 </tr>
460 <tr>
461 <td colspan="2"><code>allowDuplicates</code></td>
462 <td>
463 <p>When true, the same tag can be added multiple times. (default: false)</p>
464 <pre><code data-language="javascript">$('input').tagsinput({
465 allowDuplicates: true
466 });</code></pre>
467 </td>
468 </tr>
469 <tr>
470 <td colspan="2"><code>freeInput</code></td>
471 <td>
472 <p>Allow creating tags which are not returned by typeahead's source (default: true)</p>
473 <div class="bs-callout bs-callout-warning">
474 This is only possible when using string as tags. When itemValue option is set, this option will be ignored.
475 </div>
476 <pre><code data-language="javascript">$('input').tagsinput({
477 typeahead: {
478 source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
479 },
480 freeInput: true
481 });</code></pre>
482 </td>
483 </tr>
484 <tr>
485 <td colspan="2"><code>typeahead</code></td>
486 <td><p>Object containing typeahead specific options</td>
487 </tr>
488 </tr>
489 <tr>
490 <td></td>
491 <td><code>source</code></td>
492 <td>
493 <p>An array (or function returning a promise or array), which will be used as source for a typeahead.
494  
495  
496 <pre><code data-language="javascript">$('input').tagsinput({
497 typeahead: {
498 source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
499 }
500 });</code></pre>
501 <pre><code data-language="javascript">$('input').tagsinput({
502 typeahead: {
503 source: function(query) {
504 return $.get('http://someservice.com');
505 }
506 }
507 });</code></pre>
508 </td>
509 </tr>
510 <tr>
511 <td colspan="2"><code>cancelConfirmKeysOnEmpty</code></td>
512 <td><p>Boolean value controlling whether form submissions get processed when pressing enter in a field converted to a tagsinput (default: false).
513 <pre><code data-language="javascript">$('input').tagsinput({
514 cancelConfirmKeysOnEmpty: true
515 });</code></pre>
516 </td>
517 </tr>
518 <tr>
519 <td colspan="2"><code>onTagExists</code></td>
520 <td><p>Function invoked when trying to add an item which allready exists. By default, the existing tag hides and fades in.
521 <pre><code data-language="javascript">$('input').tagsinput({
522 onTagExists: function(item, $tag) {
523 $tag.hide().fadeIn();
524 }
525 });</code></pre>
526 </td>
527 </tr>
528 </tbody>
529 </table>
530 </section>
531  
532 <section id="methods">
533 <div class="page-header">
534 <h2>Methods</h2>
535 </div>
536 <table class="table table-bordered table-condensed">
537 <thead>
538 <tr>
539 <th>method</th>
540 <th>description</th>
541 </tr>
542 </thead>
543 <tbody>
544 <tr>
545 <td><code>add</code></td>
546 <td>
547 <p>Adds a tag</p>
548  
549 <pre><code data-language="javascript">$('input').tagsinput('add', 'some tag');</code></pre>
550  
551 <pre><code data-language="javascript">$('input').tagsinput('add', { id: 1, text: 'some tag' });</code></pre>
552  
553 Optionally, you can pass a 3rd parameter (object or value) to the <code>add</code> method to gain more control over the process. The parameter is exposed in the <code>options</code> attribute of the event.
554  
555 <pre><code data-language="javascript">$('input').tagsinput('add', 'some tag', {preventPost: true});</code></pre>
556  
557 Usage:
558  
559 <pre>
560 <code data-language="javascript">
561 $('#tags-input').on('beforeItemAdd', function(event) {
562 var tag = event.item;
563 // Do some processing here
564  
565 if (!event.options || !event.options.preventPost) {
566 $.ajax('/ajax-url', ajaxData, function(response) {
567 if (response.failure) {
568 // Remove the tag since there was a failure
569 // "preventPost" here will stop this ajax call from running when the tag is removed
570 $('#tags-input').tagsinput('remove', tag, {preventPost: true});
571 }
572 });
573 }
574 });
575 </code>
576 </pre>
577 </td>
578 </tr>
579 <tr>
580 <td><code>remove</code></td>
581 <td>
582 <p>Removes a tag</p>
583  
584 <pre><code data-language="javascript">$('input').tagsinput('remove', 'some tag');</code></pre>
585  
586 <pre><code data-language="javascript">$('input').tagsinput('remove', { id: 1, text: 'some tag' });</code></pre>
587  
588 Optionally, you can pass a 3rd parameter (object or value) to the <code>remove</code> method to gain more control over the process. The parameter is exposed in the <code>options</code> attribute of the event.
589  
590 <pre><code data-language="javascript">$('input').tagsinput('remove', 'some tag', {preventPost: true});</code></pre>
591  
592 Usage:
593  
594 <pre>
595 <code data-language="javascript">
596 $('#tags-input').on('beforeItemRemove', function(event) {
597 var tag = event.item;
598 // Do some processing here
599  
600 if (!event.options || !event.options.preventPost) {
601 $.ajax('/ajax-url', ajaxData, function(response) {
602 if (response.failure) {
603 // Re-add the tag since there was a failure
604 // "preventPost" here will stop this ajax call from running when the tag is added
605 $('#tags-input').tagsinput('add', tag, {preventPost: true});
606 }
607 });
608 }
609 });
610 </code>
611 </pre>
612 </td>
613 </tr>
614 <tr>
615 <td><code>removeAll</code></td>
616 <td>
617 <p>Removes all tags</p>
618  
619 <pre><code data-language="javascript">$('input').tagsinput('removeAll');</code></pre>
620 </td>
621 </tr>
622 <tr>
623 <td><code>focus</code></td>
624 <td>
625 <p>Sets focus in the tagsinput</p>
626  
627 <pre><code data-language="javascript">$('input').tagsinput('focus');</code></pre>
628 </td>
629 </tr>
630 <tr>
631 <td><code>input</code></td>
632 <td>
633 <p>Returns the tagsinput's internal &lt;input /&gt;, which is used for adding tags. You could use this to add your own typeahead behaviour for example.</p>
634  
635  
636 <pre><code data-language="html">var $elt = $('input').tagsinput('input');</code></pre>
637 </td>
638 </tr>
639 <tr>
640 <td><code>refresh</code></td>
641 <td>
642 <p>Refreshes the tags input UI. This might be usefull when you're adding objects as tags. When an object's text changes, you'll have to refresh to update the matching tag's text.</p>
643  
644 <pre><code data-language="javascript">$('input').tagsinput('refresh');</code></pre>
645 </td>
646 </tr>
647 <tr>
648 <td><code>destroy</code></td>
649 <td>
650 <p>Removes tagsinput behaviour</p>
651  
652 <pre><code data-language="javascript">$('input').tagsinput('destroy');</code></pre>
653 </td>
654 </tr>
655 </tbody>
656 </table>
657 </section>
658  
659 <section id="methods">
660 <div class="page-header">
661 <h2>Events</h2>
662 </div>
663 <table class="table table-bordered table-condensed">
664 <thead>
665 <tr>
666 <th>event</th>
667 <th>description</th>
668 </tr>
669 </thead>
670 <tbody>
671 <tr>
672 <td><code>itemAddedOnInit</code></td>
673 <td>
674 During initialization, pre-defined tags being added will cause this event to be triggered. Example:
675 <pre><code data-language="javascript">$('input').on('itemAddedOnInit', function(event) {
676 // event.item: contains the item
677 });</code></pre>
678 </td>
679 </tr>
680 <tr>
681 <td><code>beforeItemAdd</code></td>
682 <td>
683 Triggered just before an item gets added. Example:
684 <pre><code data-language="javascript">$('input').on('beforeItemAdd', function(event) {
685 // event.item: contains the item
686 // event.cancel: set to true to prevent the item getting added
687 });</code></pre>
688 </td>
689 </tr>
690 <tr>
691 <td><code>itemAdded</code></td>
692 <td>
693 Triggered just after an item got added. Example:
694 <pre><code data-language="javascript">$('input').on('itemAdded', function(event) {
695 // event.item: contains the item
696 });</code></pre>
697 </td>
698 </tr>
699 <tr>
700 <td><code>beforeItemRemove</code></td>
701 <td>
702 Triggered just before an item gets removed. Example:
703 <pre><code data-language="javascript">$('input').on('beforeItemRemove', function(event) {
704 // event.item: contains the item
705 // event.cancel: set to true to prevent the item getting removed
706 });</code></pre>
707 </td>
708 </tr>
709 <tr>
710 <td><code>itemRemoved</code></td>
711 <td>
712 Triggered just after an item got removed. Example:
713 <pre><code data-language="javascript">$('input').on('itemRemoved', function(event) {
714 // event.item: contains the item
715 });</code></pre>
716 </td>
717 </tr>
718 </tbody>
719 </table>
720 </section>
721 </div>
722 <footer class="footer">
723 <div class="container">
724 <p>Code licensed under <a href="https://raw.github.com/TimSchlechter/bootstrap-tagsinput/master/LICENSE" target="_blank">MIT License</a></p>
725 </div>
726 </footer>
727  
728 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
729 <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
730 <script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
731 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
732 <script src="../dist/bootstrap-tagsinput.min.js"></script>
733 <script src="../dist/bootstrap-tagsinput/bootstrap-tagsinput-angular.min.js"></script>
734 <script src="https://cdnjs.cloudflare.com/ajax/libs/rainbow/1.2.0/js/rainbow.min.js"></script>
735 <script src="https://cdnjs.cloudflare.com/ajax/libs/rainbow/1.2.0/js/language/generic.js"></script>
736 <script src="https://cdnjs.cloudflare.com/ajax/libs/rainbow/1.2.0/js/language/html.js"></script>
737 <script src="https://cdnjs.cloudflare.com/ajax/libs/rainbow/1.2.0/js/language/javascript.js"></script>
738 <script src="assets/app.js"></script>
739 <script src="assets/app_bs3.js"></script>
740 </body>
741 </html>
742