Tags Input Library is a small JavaScript plug-in that converts a regular input field into a tagging system for easier tag input.
Tag Cloud Plugin For jQuery Shows Larger Tags | jquery.tagcloud
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