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

Preview:

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" data-clear-label="Clear">
  ...
</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" data-server-params='{"key":"val"}'>
  <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>

12. Customize the badge style and/or class.

<option value="2" data-badge-style="success" selected="selected">Banana</option>
<option value="3" data-badge-style="warning" data-badge-class="text-dark another-class">Orange</option>
<option value="4" data-badge-style="secondary">Blueberry with a very long label that pushes the menu</option>

13. Determine whether to keep suggestions open after selection. Clear on focus out. Default: false.

<option value="2" data-badge-style="success" selected="selected">Banana</option>
<option value="3" data-badge-style="warning" data-badge-class="text-dark another-class">Orange</option>
<option value="4" data-badge-style="secondary">Blueberry with a very long label that pushes the menu</option>

<select class="form-select" id="validationTagsJson" name="tags_json[]" multiple data-allow-new="true" data-server="demo.json" data-live-server="1" data-server-params='{"key":"val"}' data-keep-open="1">
  <option disabled hidden value="">Choose a tag...</option>
</select>

14. Set the debounce time. Default: 300.

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

15. Set the debounce time. Default: 300.

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

16. You’re also allowed to pass the options via JavaScript. Full options:

• allowNew: Allows creation of new tags
• showAllSuggestions: Show all suggestions even if they don’t match. Disables validation.
• badgeStyle: Color of the badge (color can be configured per option as well)
• allowClear: Show a clear icon
• clearEnd: Place clear icon at the end
• selected: A comma separated list of selected values
• regex: Regex for new tags
• separator: A list (pipe separated) of characters that should act as separator (default is using enter key)
• max Limit to a maximum of tags (0 = no limit)
• placeholder: Provides a placeholder if none are provided as the first empty option
• clearLabel: Text as clear tooltip
• searchLabel: Default placeholder
• keepOpen: Keep suggestions open after selection, clear on focus out
• allowSame: Allow same tags used multiple times
• baseClass: Customize the class applied to badges
• addOnBlur: Add new tags on blur (only if allowNew is enabled)
• showDisabled: Show disabled tags
• hideNativeValidation: Hide native validation tooltips
• suggestionsThreshold: Number of chars required to show suggestions
• maximumItems: Maximum number of items to display
• autoselectFirst: Always select the first item
• updateOnSelect: Update input value on selection (doesn’t play nice with autoselectFirst)
• highlightTyped: Highlight matched part of the suggestion
• fullWidth: Match the width on the input field
• fixed: Use fixed positioning (solve overflow issues)
• labelField: Key for the label
• valueField: Key for the value
• queryParam: Name of the param passed to endpoint (query by default)
• server: Endpoint for data provider
• serverMethod: HTTP request method for data provider, default is GET
• serverParams: Parameters to pass along to the server
• fetchOptions: Any other fetch options (https://developer.mozilla.org/en-US/docs/Web/API/fetch#syntax)
• liveServer: Should the endpoint be called each time on input
• noCache: Prevent caching by appending a timestamp
• debounceTime: Debounce time for live server
• notFoundMessage: Display a no suggestions found message. Leave empty to disable
• onRenderItem: Callback function that returns the suggestion
• onSelectItem: Callback function to call on selection
• onClearItem: Callback function to call on clear
• onServerResponse: Callback function to process server response. Must return a Promise

allowNew: false,
showAllSuggestions: false,
badgeStyle: "primary",
allowClear: false,
clearEnd: false,
selected: [],
regex: "",
separator: [],
max: 0,
clearLabel: "Clear",
searchLabel: "Type a value",
keepOpen: false,
allowSame: false,
baseClass: "",
placeholder: "",
addOnBlur: false,
showDisabled: false,
hideNativeValidation: false,
suggestionsThreshold: 1,
maximumItems: 0,
autoselectFirst: true,
updateOnSelect: false,
highlightTyped: false,
fullWidth: false,
fixed: false,
labelField: "label",
valueField: "value",
queryParam: "query",
server: "",
serverMethod: "GET",
serverParams: {},
fetchOptions: {},
liveServer: false,
noCache: true,
debounceTime: 300,
notFoundMessage: "",
onRenderItem: (item, label) => {
  return label;
},
onSelectItem: (item) => {},
onClearItem: (value) => {},
onServerResponse: (response) => {
  return response.json();
},

Changelog:

v1.5.13 (03/17/2023)

• Add loadData()
• Fix max-width issue
• Refactor add on blur

v1.5.12 (03/16/2023)

• Optgroup support
• Lots of minor fixes

v1.5.10 (03/13/2023)

• Check regex only for new input
• Add custom validator with onCanAdd
• Refactoring

v1.5.9 (03/07/2023)

• Add fetch options

v1.5.8 (03/01/2023)

• Fix resize event
• Improve scroll handling
• Disabled pseudo class

v1.5.7 (02/27/2023)

• Added highlightTyped
• Added disabled option support
• Fix validation in various scenarios (mobile, native, …)
• Other minor tweaks

v1.5.6 (02/14/2023)

• Fix show menu with arrow down

v1.5.5 (02/09/2023)

• Improve fixed positioning and refactor menu positioning
• RTL support
• Fix minWidth on input

v1.5.4 (01/17/2023)

• Fix onClearItem not being triggered

v1.5.3 (01/17/2023)

• Add fixed positioning option
• Add allowSame option
• Minor tweaks

v1.5.2 (01/09/2022)

• Bootstrap 5.3 dark mode support
• Configurable query parameter

v1.5.1 (12/12/2022)

• Bugfix

v1.5.0 (11/21/2022)

• Accessibility improvements
• Refactored config system
• Added new options

v1.4.42 (11/09/2022)

• Add on blur feature + event fired on blur for custom behaviour

v1.4.41 (10/26/2022)

• Fix android support
• Add focus support

v1.4.40 (10/25/2022)

• Improve input event support
• Clicking on label now works as expected
• Android “enter” support improved

v1.4.39 (10/13/2022)

• Fix initial values from remote server
• Suggestions threshold 0 now works as expected with live server

v1.4.38 (07/05/2022)

• New badge default classes and new clear icon position flag

v1.4.37 (07/04/2022)

• Update

v1.4.36 (06/30/2022)

• Add base class option

v1.4.35 (06/22/2022)

• fix showing all suggestions

v1.4.34 (04/22/2022)

• Fix unexpected suggestions showing when max is above limit

v1.4.32 (04/19/2022)

• Fix placeholder size for non ascii chars
• Support form-select-lg and form-select-sm classes

v1.4.30/31 (04/19/2022)

• Fix input size for non ascii languages

v1.4.29 (03/18/2022)

• placeholder also works as a constructor param
• add full width feature

v1.4.28 (03/18/2022)

• Fix bounding (right and bottom)

v1.4.27 (03/18/2022)

• Fix hardcoded value

v1.4.26 (03/17/2022)

• Add keep open
• Debounce ajax calls
• Support custom columns names

v1.4.25 (03/01/2022)

• fix minor issue with overflow container

v1.4.24 (02/11/2022)

• Deal better with window borders and overflow containers
• Remove unnecessary standalone build since we don’t use the dropdown js lib

v1.4.23 (02/10/2022)

• Switch from private var/methods to _ based convention and mangle props. This allows support for safari 14.1 and improve min file size even more.

v1.4.22 (02/08/2022)

• Support multiple classes on badges

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