Easy Tags Input Component For Bootstrap 5/4 – Tags.js

Category: Form , Javascript | January 20, 2022
Author:lekoala
Views Total:170 views
Official Page:Go to website
Last Update:January 20, 2022
License:MIT

Preview:

Easy Tags Input Component For Bootstrap 5/4 – Tags.js

Description:

A vanilla JavaScript (ES6) extension to Bootstrap 5 (and Bootstrap 4) 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 on the select element.

Tags.init("select[multiple]");

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 allow new options only if they match a given regex.

<select class="form-select" id="validationTagsNew" name="tags_new[]" multiple data-allow-new="true" data-regex=".*@mycompany\.com$">
  <option disabled hidden value="">Add mail address</option>
  <option value="1" selected="selected">[email protected]</option>
  <option value="2">[email protected]</option>
  <option value="3">[email protected]</option>
</select>
<div class="invalid-feedback">Please select only @mycompany.com addresses.</div>

6. 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>

7. Enable the close icon to clear all sections.

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

8. Load data from an external JSON file.

<select class="form-select" id="validationTagsJson" name="tags_json[]" multiple data-allow-new="true" data-server="demo.json" data-live-server="1">
  <option disabled hidden value="">Choose a tag...</option>
</select>

9. Set the maximum number of tags allowed to insert.

<select class="form-select" id="validationTagsJson" name="tags_json[]" multiple data-max="5" data-server="demo.json" data-live-server="1">
  <option disabled hidden value="">Choose a tag...</option>
</select>

10. Customize the separator. You can add multiple separators with |.

<select class="form-select" id="validationTagsJson" name="tags_json[]" multiple data-separator=" |," data-server="demo.json" data-live-server="1">
  <option disabled hidden value="">Choose a tag...</option>
</select>

11. Determine how many characters need to be typed to show the dropdown. Default: 1.

<select class="form-select" id="validationTagsJson" name="tags_json[]" data-suggestions-threshold="2">
  <option disabled hidden value="">Choose a tag...</option>
</select>

Changelog:

v1.4.21 (01/20/2022)

  • Allow to use esc to hide suggestions
  • Added some unit tests and rework some of the internals

v1.4.20 (01/20/2022)

  • Fix regression for enter key

v1.4.19 (01/19/2022)

  • Fix regression from input event

v1.4.18 (01/19/2022)

  • Fix and refactor how max setting works

v1.4.14 (01/17/2022)

  • Update

v1.4.12 (01/15/2022)

  • Disable spellcheck
  • Hide dropdown on validation error

v1.4.11 (01/14/2022)

  • Restore the selected attribute

v1.4.10 (01/13/2022)

  • Refactor resetState

v1.4.9 (01/13/2022)

  • Rework single select again

v1.4.8 (01/12/2022)

  • Fix event bubbling
  • Rework single select

v1.4.7 (01/12/2022)

  • Allow to reset state
  • Fix dispose

v1.4.6 (01/10/2022)

  • Add ability to reset suggestions if options are updated

v1.4.5 (01/10/2022)

  • Fix suggestionsThreshold global setting if 0

v1.4.4 (01/10/2022)

  • Add ability to reset suggestions if options are updated

v1.4.3 (01/10/2022)

  • Disable disabled options
  • Keep suggestions open if threshold is 0
  • Initialize with empty list

v1.4.2 (12/29/2021)

  • Fix layout issue in Firefox
  • Improve bs4 close icon

v1.4.1 (12/29/2021)

  • Single select support
  • Internal tweaks
  • Fire change events properly
  • Add getInstance for bootstrap consistency

v1.4.0 (12/28/2021)

  • Drastically reduced the minified file size thanks to private scope

v1.3.6 (12/28/2021)

  • Support multiple separators

v1.3.5 (12/23/2021)

  • Support max tags

v1.3.4 (12/23/2021)

  • Allow custom separator

v1.3.3 (12/23/2021)

  • fix regression

v1.3.2 (12/23/2021)

  • add regex validation feature
  • demo & doc update

v1.3.0/1 (12/13/2021)

  • Server side support
  • Honor reset

v1.2.2 (12/13/2021)

  • get rid of setTimeout

v1.2.0 (11/18/2021)

  • Bootstrap 4 support

v1.1.6 (11/15/2021)

  • Fix remove last item (which prevents backspace from working properly)
  • Improve accessibility

v1.1.5 (10/26/2021)

  • Don’t allow adding same value twice
  • Don’t keep focus when clicking on clear icon

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:


3 thoughts on “Easy Tags Input Component For Bootstrap 5/4 – 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
  2. [email protected]

    Hello my friend, thanks for sharing. Please note that the downloaded tags.js file (as of 21st Dec) is not the same as the one running on your demo site and it encounters an error during initialisation.

    Reply

Leave a Reply