Press "Enter" to skip to content

Pure JavaScript Solution for Creating Tags Input Element

Tags Input Library is a small JavaScript plug-in that converts a regular input field into a tagging system for easier tag input.

How to make use of it:

Create a normal text area on the web page.

<input type="text" id="example">

Include the JavaScript file ‘tags-input.js’ at the bottom of the webpage.

<script src="tags-input.js"></script>

Initialize the tags input plugin on the textual content area.

var instance = new TagsInput({
    selector: 'example'
});

Add pre-selected tags to the tags input.

instance.addData(['HTML' , 'JavaScript' , 'CSS'])

This will convert the textual content area into…

<div class="tags-input-wrapper">  
  <span class="tag">JavaScript<a>×</a></span>
  <span class="tag">CSS<a>×</a></span>
<span class="tag">WebCodeFlow<a>×</a></span> <input> </div> <input type="text" id="example" hidden="true">

Apply your personal types to the tags input.

.tags-input-wrapper{
  background: transparent;
  padding: 10px;
  border-radius: 4px;
  max-width: 400px;
  border: 1px solid #ccc
}

.tags-input-wrapper input{
  border: none;
  background: transparent;
  outline: none;
  width: 150px;
}

.tags-input-wrapper .tag{
  display: inline-block;
  background-color: #fa0e7e;
  color: white;
  border-radius: 40px;
  padding: 0px 3px 0px 7px;
  margin-right: 5px;
  margin-bottom:5px;
  box-shadow: 0 5px 15px -2px rgba(250 , 14 , 126 , .7)
}

.tags-input-wrapper .tag a {
  margin: 0 7px 3px;
  display: inline-block;
  cursor: pointer;
}

Specify the utmost variety of tags allowed to insert.

var instance = new TagsInput({
    max : 10
});

Enable/disable duplicate detection.

var instance = new TagsInput({
    duplicate : true
});

Set the wrapper ingredient for the tags input.

var instance = new TagsInput({
    wrapperClass : 'tags-input-wrapper'
});

Minimal Tags Input Plugin, Tags Input Library Plugin/Github


See Demo And Download

Official Website(iamqamarali): Click Here

This superior jQuery/javascript plugin is developed by iamqamarali. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *