vanilla-tags-input

JavaScript Tags Input Library

Native JavaScript library to make Tags Input Element in DOM. There isn't any dependency for this library, add it straight in your project and you'r ready to go.

Install via npm

npm install vanilla-tags-input

Require in Node

let TagsInput = require('vanilla-tags-input')

Import Styles

@import '~vanilla-tags-input/tags-input.css'

##3 Alternatively, you can use a CDN or even download

<!-- Tags-input CSS -->
<link rel="stylesheet" href="https://unpkg.com/vanilla-tags-input/tags-input.css">

<!-- Tags-input JavaScript -->
<script src="https://unpkg.com/vanilla-tags-input"></script>

Usage

Selector is the only compulsory option to making this plugin work, and it accepts ID of input field you want to convert to tag input.

var tagInput1 = new TagsInput({
    selector: 'tag-input1',
});

However there are few other options too like

• Duplicate - Set it to yes if you want to allow duplicate tags
• Max - Limit the maximum number of tags to be added in plugin

var tagInput1 = new TagsInput({
    selector: 'tag-input1',
    duplicate : false,
    max : 10
});

Options

Add multiple tags programatically

tagInput1.addData(['PHP' , 'JavaScript' , 'CSS'])
// or add single one
tagInput1.addTag('React');

Check if there are any erros to add a tag

tagInpu1.anyErrors('another tag');

Destroy the instance and release the cached memory

tagInput1.destroy();

Reinitialize the plugin if previously destroyed

tagInput1.init()

// you can reinitialize options
tagInput1.init({
    selector: 'other-tag-input',
    duplicate : false,
    max : 10
})

Method chaning available too

tagsInput1.init().addTag().addData().destroy().init()

License

MIT Copyright (c) 2018-present, Qamar Ali

For Learning Purposes

Here is a Demo on codepen

Find Tutorial on how i build this javascript library.