Free Download Bootstrap 4 Tag Input Plugin With jQuery – Tagsinput.js

This time I will share jQuery Plugin and tutorial about Bootstrap 4 Tag Input Plugin With jQuery – Tagsinput.js, hope it will help you in programming stack.

File Size:	10.1 KB
Views Total:	76186
Last Update:	7 months ago
Publish Date:	3 years ago
Official Website:	Go to website
License:	MIT

Demo Download

Tagsinput.js is a jQuery extension to make the Bootstrap Tags Input jQuery plugin work with the latest version of Bootstrap 4 framework.

The Bootstrap Tags Input plugin allows you to add, remove, manager, manipulate tags and tokens with Twitter Bootstrap user interface.

How to use it:

1. Include the jQuery Tagsinput.js plugin’s file on your Bootstrap 4 project as these:

01
<!-- Stylesheet -->

02
<link rel="stylesheet"

03
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"

04
      integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"

05
      crossorigin="anonymous">

06
<link href="tagsinput.css" rel="stylesheet" type="text/css">

07
 
08
<!-- JavaScript -->

09
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"

10
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"

11
        crossorigin="anonymous">

12
</script>

13
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"

14
        integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"

15
        crossorigin="anonymous">

16
</script>

17
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"

18
        integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"

19
        crossorigin="anonymous">

20
</script>

21
<script src="tagsinput.js"></script>

2. Add the data-role="tagsinput" attribute to input fields or select elements and done.

1
<input type="text" data-role="tagsinput" value="jQuery,Script,Net">

2
<select multiple data-role="tagsinput">

3
  <option value="jQuery">jQuery</option>

4
  <option value="Angular">Angular</option>

5
  <option value="React">React</option>

6
  <option value="Vue">Vue</option>

7
  ...

8
</select>

3. You can also dynamically add the tags using add method as these:

1
$('input').tagsinput('add', { "value": 1 , "text": "jQuery"});

2
$('input').tagsinput('add', { "value": 2, "text": "Script"});

3
$('input').tagsinput('add', { "value": 3, "text": "Net"});

4. Get the selected values.

`1`	`$("input").val()`

5. Get the selected tags.

`1`	`$("input").tagsinput('items')`

6. All possible plugin options.

01
{

02
  tagClass: function(item) {

03
    return 'badge badge-info';

04
  },

05
  focusClass: 'focus',

06
  itemValue: function(item) {

07
    return item ? item.toString() : item;

08
  },

09
  itemText: function(item) {

10
    return this.itemValue(item);

11
  },

12
  itemTitle: function(item) {

13
    return null;

14
  },

15
  freeInput: true,

16
  addOnBlur: true,

17
  maxTags: undefined,

18
  maxChars: undefined,

19
  confirmKeys: [13, 44],

20
  delimiter: ',',

21
  delimiterRegex: null,

22
  cancelConfirmKeysOnEmpty: false,

23
  onTagExists: function(item, $tag) {

24
    $tag.hide().fadeIn();

25
  },

26
  trimValue: false,

27
  allowDuplicates: false,

28
  triggerChange: true

29
}

Changelog:

2020-08-29

Fix jquery validate error: “has no name assigned”

2019-10-11

Removed duplicate badge class on badges

2019-09-12

Add default styles to avoid break layout when suggestions are visible.
jQuery selector fix for values containing quotes

2019-05-03

Fixed: Existing tag removed instead replace

2018-05-16

Fix when change delimiter

2018-05-05

Setting style to display: none breaks browser-native validation; use sr-only class instead

This awesome jQuery plugin is developed by Nodws. For more Advanced Usages, please check the demo page or visit the official website.

How to use it:

Changelog:

Share this:

Related posts: