Bootstrap 4 Tag Input Plugin With jQuery - Tagsinput.js

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.

Bootstrap 5 Version Is Now Available HERE.

How to use it:

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

<!-- Stylesheet -->
<link rel="stylesheet" 
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" 
      integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" 
      crossorigin="anonymous">
<link href="tagsinput.css" rel="stylesheet" type="text/css">

<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" 
        integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" 
        crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
        integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" 
        crossorigin="anonymous">
</script>
<script src="tagsinput.js"></script>

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

<input type="text" data-role="tagsinput" value="jQuery,Script,Net">
<select multiple data-role="tagsinput">
  <option value="jQuery">jQuery</option>
  <option value="Angular">Angular</option>
  <option value="React">React</option>
  <option value="Vue">Vue</option>
  ...
</select>

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

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

4. Get the selected values.

$("input").val()

5. Get the selected tags.

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

6. All possible plugin options.

{
  tagClass: function(item) {
    return 'badge badge-info';
  },
  focusClass: 'focus',
  itemValue: function(item) {
    return item ? item.toString() : item;
  },
  itemText: function(item) {
    return this.itemValue(item);
  },
  itemTitle: function(item) {
    return null;
  },
  freeInput: true,
  addOnBlur: true,
  maxTags: undefined,
  maxChars: undefined,
  confirmKeys: [13, 44],
  delimiter: ',',
  delimiterRegex: null,
  cancelConfirmKeysOnEmpty: false,
  onTagExists: function(item, $tag) {
    $tag.hide().fadeIn();
  },
  trimValue: false,
  allowDuplicates: false,
  triggerChange: true
}

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.