Easy Tags Input Component For Bootstrap 5 – Tags.js

Category: Form , Javascript | June 9, 2021
Author: lekoala
Views Total: 120 views
Official Page: Go to website
Last Update: June 9, 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>

Changelog:

v1.0.1 (06/09/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