Vanilla JS Tags Input For Bootstrap 5/4 – Tagin

Category: Image | December 17, 2021
Author:erwinheldy
Views Total:777 views
Official Page:Go to website
Last Update:December 17, 2021
License:MIT

Preview:

Vanilla JS Tags Input For Bootstrap 5/4 – Tagin

Description:

Tagin is a simple, pure JavaScript tags input plugin based on the Bootstrap 5 or Bootstrap 4 stylesheet.

Features:

  • Allows you to insert multiple tags using comma.
  • Or using a custom separator like Space, semicolon, etc.
  • Checks if the tag is duplicate.
  • Allows you to transform tags.

How to use it:

1. Load the latest Bootstrap 5 or Bootstrap 4 stylesheet for the tags input.

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

2. Load the Tagin plugin’s files.

<link rel="stylesheet" href="css/tagin.min.css" />
<script src="js/tagin.min.js"></script>
// OR
import Tagin from './path/to/tagin.module.js'

3. Create a tags input field and specify a list of pre-defined tags separated with comma.

<input type="text" name="tags" class="form-control tagin" value="css,script,com" />

4. Initialize the Tagin and done.

const tagin = new Tagin(document.querySelector('.tagin'), {
      // options here
})

5. Add a placeholder to the tags input.

<input type="text" name="tags" class="form-control tagin" value="css,script,com" data-tagin-placeholder="Type Tags Here" />

6. Customize the separator. Defaults to comma (,).

<input type="text" name="tags" class="form-control tagin" value="css script com" data-tagin-separator=" " />

7. Determine whether to check the duplicate tag.

<input type="text" name="tags" class="form-control tagin" value="css,script,com,css,script,com" data-duplicatetagin-="true" />

8. Transform the typed tags using the data-transform attribute:

<input type="text" name="tags" class="form-control tagin" value="CSS,Script,Com" data-tagin-transform="input => input.toUpperCase()" />

9. Determine whether or not to allow the user to add tags by pressing the enter key.

<input type="text" name="tags" class="form-control tagin" value="CSS,Script,Com" data-tagin-enter />

10. You can also pass the options via JavaScript as follows:

const tagin = new Tagin(document.querySelector('.tagin'), {
      separator: ',',
      duplicate: false,
      enter: false, // default: false
      transform: 'input => input',
      placeholder: ''
})

11. API methods.

// add a new tag
tagin.addTag('css');
// add new tags
tagin.addTag(['css', 'script']);
// get tags as a string
tagin.getTag();
// get tags as an array
tagin.getTags();

Changelog:

v2.0.1 (12/17/2021)

  • fix “tagin.min.js” not working

v2.0.0 (12/08/2021)

  • Refactor Tagin as a class.
  • Rewrite with TypeScript.
  • Namespaced data attributes. For example, we use data-tagin-placeholder instead of data-placeholder.
  • Added 3 new methods. addTag getTag getTags.
  • Added Tagin module files.

v1.3.1 (08/23/2021)

  • add module export for using tagin via import

v1.3.0 (05/23/2021)

  • Support bootstrap v5
  • Fix paste string with tag separator not splitting

v1.2.0 (11/03/2020)

  • Update to bootstrap v4.5.3
  • Add tag on blur

You Might Be Interested In:


One thought on “Vanilla JS Tags Input For Bootstrap 5/4 – Tagin

Leave a Reply