Easy Tags Input Component For Bootstrap 5 – Tags.js

Category: Form , Javascript | August 22, 2021
Author:lekoala
Views Total:801 views
Official Page:Go to website
Last Update:August 22, 2021
License:MIT

Preview:

Easy Tags Input Component For Bootstrap 5 – Tags.js

Description:

A vanilla JavaScript (ES6) extension to Bootstrap 5 that converts a multi-select box into a user-friendly tags input component.

How to use it:

1. Import the Tags.js.

import Tags from "./tags.js";

2. Initialize the library.

Tags.init();

3. That’s it. It will automatically convert all select boxes with the multi attribute into a tags input where you can select options from a suggestion list while typing.

<select class="form-select" id="validationTags" multiple>
  <option selected disabled hidden value="">Choose a tag...</option>
  <option value="1" selected="selected">JavaScript</option>
  <option value="2">HTML5</option>
  <option value="3">CSS3</option>
  <option value="4">jQuery</option>
  <option value="5">React</option>
  <option value="6">Angular</option>
  <option value="7">Vue</option>
  <option value="8">Python</option>
</select>
<div class="invalid-feedback">Please select a valid tag.</div>

4. Add the data-allow-new="true" to the select box in cases where you want to add new options.

<select class="form-select" id="validationTags" multiple data-allow-new="true">
  <option selected disabled hidden value="">Choose a tag...</option>
  <option value="1" selected="selected">JavaScript</option>
  <option value="2">HTML5</option>
  <option value="3">CSS3</option>
  <option value="4">jQuery</option>
  <option value="5">React</option>
  <option value="6">Angular</option>
  <option value="7">Vue</option>
  <option value="8">Python</option>
</select>

5. Determine whether to show all suggestions using the data-show-all-suggestions attribute.

<select class="form-select" id="validationTags" multiple data-show-all-suggestions="true">
  ...
</select>

6. Enable the close icon to clear all sections.

<select class="form-select" id="validationTags" multiple data-allow-clear="true">
  ...
</select>

Changelog:

v1.1.4 (08/22/2021)

  • don’t use scrollIntoView

v1.1.3 (08/19/2021)

  • improve clear ui
  • add suggestions threshold

v1.1.2 (08/10/2021)

  • Added allow clear

v1.1.1 (08/10/2021)

  • Mouse should not interfere with keyboard nav

v1.1.0 (08/10/2021)

  • Add show all suggestions option
  • Ux improvements (show list with arrow down + better visibility for selection)
  • Handle long lists (with scrollbar)

v1.0.3 (08/10/2021)

  • Update

v1.0.2 (06/28/2021)

  • Update

You Might Be Interested In:


One thought on “Easy Tags Input Component For Bootstrap 5 – Tags.js

  1. Stefan Girsberger

    Hi, thanks so much for this simple yet awesome feature. I have one small issue when using it. I want to use it solely for entering “new” tags, so without a “lookup” functionality, within a form in html. I want to pass the data entered to python back-end. However, python only receives the very first value/tag as opposed to the whole list of tags entered. Any idea what may be causing this?
    Thanks in advance!
    Stefan

    Reply

Leave a Reply