Tiny Dynamic Tags Input In Vanilla JavaScript – Tags Editor

Category: Form , Javascript | September 22, 2022
Author:dprietob
Views Total:442 views
Official Page:Go to website
Last Update:September 22, 2022
License:MIT

Preview:

Tiny Dynamic Tags Input In Vanilla JavaScript – Tags Editor

Description:

Tags Editor is a simple, fast, lightweight, dynamic tags input built with Vanilla JavaScript.

Feel free to download and use it in your next project to tag articles, products, or blog posts correctly and completely.

How to use it:

1. Install & download.

# NPM
$ npm i tags-editor

2. Import the Tags Editor.

<script src="./dist/bundle.js"></script>

3. Transform an empty DIV element into a basic tags input using the ‘data-tags-editor’ attribute:

<div data-tags-editor>
</div>

4. Predefine tags using the ‘data-tags-list’ attribute.

<div data-tags-editor data-tags-list="css,script,com">
</div>

5. Specify the placeholder of the tags input.

<div data-tags-editor data-tags-placeholder="Type something...">
</div>

6. Create a tags input dynamically.

window.__tagsEditor.initializeEditor(element);

7. Get the selected tags.

document
  .querySelectorAll('[data-tags-editor]')
  .forEach(editor =>
    editor.addEventListener('updateTagsList', e => console.log(e.detail.tagsList)
  )
);

8. Get the removed tags.

document
  .querySelectorAll('[data-tags-editor]')
  .forEach(editor =>
    editor.addEventListener('removedTag', e => console.log(e.detail.tagValue)
  )
);

You Might Be Interested In:


Leave a Reply