Minimal Tags Input Plugin In jQuery - tagInput.js

A minimal, clean, and customizable jQuery tags input plugin that turns text typed in an input box into tags by pressing Tab Or Space key.

Works with any frameworks (like Bootstrap) and uses a hidden input field to store the tag values.

How to use it:

1. Insert the taginput.css and taginput.js files into your webpage.

<link rel="stylesheet" href="/path/to/css/taginput.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/js/taginput.js"></script>

2. Load the Font Awesome for the Remove icon. OPTIONAL.

<link rel="stylesheet" href="/path/to/cdn/fontawesome.min.css" />

3. Create a container to hold the tags input.

<div class="myTags"></div>

4. Create a hidden input to store the values you typed in the tags input.

<input type="text" class="inputTags" hidden />

5. Call the function on the container element to initialize the tags input.

$('.myTags').TagsInput({

  // placeholder text
  tagInputPlaceholder:'eg. jquery',

  // hidden input
  tagHiddenInput: $('.inputTags')

});

6. Customize the appearance of the tags input.

$('.myTags').TagsInput({

  // placeholder text
  tagInputPlaceholder:'eg. jquery',

  // hidden input
  tagHiddenInput: $('.inputTags'),

  // border color
  tagContainerBorderColor: '#222',
  
  // background color
  tagBackgroundColor: '#222',

  // tag color
  tagColor: '#fff',

  // border color of tags
  tagBorderColor: '#688eac'

});

7. Customize the Remove icon in the taginput.js.

// line 37
<i class="fa fa-times"></i>

Changelog:

2020-09-06

• fix hidden input value after rag remove

---

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