input tags by using jquery.tagsinput.js plugin in jquery

Share Me
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Today now in this post i will talk about input tags by using jquery.tagsinput.js plugin in jquery. If we need to add the multiple tags from input then we can do it by using XOXCO plugin. So now in this example we can do it quickly. jquery tagsinput is help us to add the multiple tags also with good layout. So after run the bellow example we will found as like as you want. Now in this example i will use cdn js path that way we don’t require to download any js from the internet. So we have to just copy this file and then run in your sytem.

Example:
 <html lang="en">
<head>
    <title>Jquery - input tags plugin example</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.js"></script>

</head>
<body style="background: #337AB7">


<div style="width: 500px; margin: 0px auto;">
 <h2 style="font-family:cursive;">Jquery - input tags plugin example</h2>
 <input name="tags" id="input-tags" style="width:500px !important" />
</div>


<script type="text/javascript">
 $('#input-tags').tagsInput();
</script>


</body>
</html>

Read Also : Laravel 8 Mobile Number Verification Tutorial

Thanks for read. I hope it help you. For more you can follow us on facebook

About code chef

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by code chef →