Back to menu
Tags input like Youtube in Jquery 0 692
Demo Download

Hi, This is our new post and in this post we will learn how to integrate Bootstrap tokenfield plugin for tag within our system and how to insert that Bootstrap tokenfield data into Mysql table by using PHP script with JQuery Ajax. We all know Tags are used define content in group and organize that content with different part. If you have used wordpress and it has been provies tags option for define content into different group. So here we have also learn something about tag, for make wordpress type tag taxonomy we have use Bootstrap Tokenfield plugin with Jquery UI autocomplete widget. In this post we will applied Bootstrap Tokenfield tags to input type textbox, so when ever user has come for enter his particular data then JQuery UI autocomplete will load pre populated list of stored data and from that list user can select his proper option. After selecting option that data will be converted into stylish tag. We can also remove tag by clicking on remove button, every tag has it's own remove button, so we can remove particular tag by clicking on remove button and it will be remove from textbox.

Create index.html

                            
                                
<!DOCTYPE html>
<html>
 <head>
  <title>Tags input in JQuery</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.js"></script>
 </head>
 <style>
     .tokenfield{
         height : 250px!important
     }
     .dtext{
         display: flex;
     }
     .dtext label:nth-child(1){
         flex-grow: 1;
         font-size: 25px;
     }
     .token{
            height: 29px!important;
     }
 </style>
 <body>
  <div class="container mt-5">
   <div class="row">
     <div class="col-md-6" style="margin:0 auto; float:none;">
        <h2 class="text-center mb-5">Tags input like <span class="text-danger">Youtube</span> in JQuery</h2>
      <form method="post" id="" clas="mt-5">
       <div class="form-groups">
           <div class="dtext mb-2">
            <label>Enter tags</label>
            <button class="btn" onclick="deleteall()">Delete all</button>
           </div>
        <textarea type="text" name="skill" id="skill" rows=50 cols=50 class="form-control" ></textarea>
       </div>
      </form>
     </div>
    </div>
   </div>
 </body>
</html>
<script>
$(document).ready(function(){
 
$('#skill').tokenfield({ autocomplete:{  source: ['Tiktok','Instagram','Facebook','Follow','Share','Like'], delay:100},showAutocompleteOnFocus: true });});

function deleteall(){
    document.getElementsByClassName("tokenfield").innerHTML = "";
}
</script>

Demo Download
Share
http://bimash.com.np/SourceCode/Code/tags-input-using-jquery

Popular Posts