Automatically Generate Multi-Input Tags Component With Value Validation | Taglist

Taglist jQuery Plugin is a jQuery-based component that is useful for automatic tag generation, similar to how GMail uses for example when entering email IDs in the To section when composing an email message. Taglist is a multi-input plugin for jQuery that allows you to insert multiple values ​​(separated by a space) as tags in a text field.

As you complete an email message and move to the next email, a mark is created in the input field. JQuery – taglist.jquery.js plugin will be included in the HTML page. For an example of how to use this plugin, check index.html, and its associated demo.js text.


  • The width of the text input does not take up the entire width when it falls on a new line.
  • Sometimes white spaces left from the input buffer cause a user to press backspace three times before deleting the tag.
  • JS error (not fatal) when pressing backspace key multiple times if no sign is present.
  • Clicking on the list bin does not focus on the input item.

How to make use of it:

1. Insert the jQuery Taglist plugin’s files into the doc.

<link rel="stylesheet" href="/path/to/css/taglist.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/js/taglist.jquery.js"></script>

2. Generate a primary multi-input element inside a container you specify.

<div id="example"></div>
$('#example' ).tagList('create', {
  // options here

3. Apply a customized validator to the multi-input component.

$('#example' ).tagList('create', {
  tagValidator : function( emailid ) {
    // email address
    var emailPat = /^[A-Za-z]+[A-Za-z0-9._]*@[A-Za-z0-9]+\.[A-Za-z.]*[A-Za-z]+$/;
    return emailPat.test( $.trim( emailid ) );

$('#example' ).tagList('create', {
  tagValidator : function( mobileNumber ) {
    // phone number
    var mobileNumberPat = /^[1-9]{1}[0-9]{9}$/;
    return mobileNumberPat.test( $.trim( mobileNumber ) );

4. Get the present tag listing utilizing the tagadd event.

$( '#example' ).on( 'tagadd', function( $event, tagText, opStatus, message ) {
  if( opStatus === 'success' ) {
    console.log( 'Email \'' + tagText + '\' added' );
  } else if( opStatus === 'failure' ) {
    alert( 'Email \'' + tagText + '\' could not be added [' + message + ']' );

5. Trigger a function after a tag has been removed.

$( '#example' ).on( 'tagremove', function( $event, tagText ) {
  console.log( 'Tag \'' + tagText + '\' removed' ); 

Multi Input Component With Value Validation, Taglist jQuery Plugin/Github

See Demo And Download

Official Website(puranik3): Click Here

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

Related Posts


Generating Beautiful Vector Graphs With jQuery | smartGraph

SmartGraph is a free and easy-to-use JavaScript library to create beautiful vector diagrams with many customizations. This plugin allows developers to create dynamic, responsive, draggable vector graphics…


Image Slider With 20 Cool Transitions Component | vue-flux

Vue flux is an image slider developed with Vuejs 2 that comes with 20+ nice transitions out of the box. Included transitions 2D transitions Fade: Fades from…


Simple background Image Parallax Scroll Plugin In jQuery

Background parallax effect is a simple jQuery background image without any library. Uses jQuery’s scroll() function to track the scroll event and applies the exact parallax scroll…


Modular Color Picker Plugin for Bootstrap | BS Colorpicker

Bootstrap Colorpicker is a standard color picker plugin for Bootstrap 4. Colorpicker Plugin for Bootstrap 5/4/3 frameworks that allow you to add a color picker to an…


GDPR Friendly iFrame Manager In Vanilla JS | iframemanager

IframeMananger is a lightweight JavaScript plug-in that helps you to comply with GDPR by completely removing iframes at first and setting a notice related to that service….


Diagonal Thumbnails Carousel Slider | Anime.js

Diagonal Slider is a cool mini carousel made with Anime.js JavaScript library. It takes a bunch of pictures and turns them into a circular user interface where…