Limit tags in bootstrap-tagsinput v0.8.0

0

I need to create a field where you can put a certain number of tags in an input form.

I'm using the bootstrap-tagsinput v0.8.0 plugin of jquery, I managed to make it work, but it does not limit the number of words to be typed, I could do this in this bootstrap- tagsinput v0.8.0 ?

In this way it makes the limitation equal in both. But how do I when I have two inputs, limits 3 to one and 10 to the other?

$(document).ready(function() {

$('input').tagsinput({
  maxTags: 3
});

Html

<div class="col-md-6">
   <div class="card-box">
      <h4 class="header-title m-t-0 m-b-20">Palavras-chave</h4>
      <p class="text-muted font-14">
         Permitido até 40 palavras
      </p>
      <div class="tags-default">
         <input type="text" id="palavras_chave" data-role="tagsinput" placeholder="add tags"/>
      </div>
   </div>
</div>
<div class="col-md-6">
   <div class="card-box">
      <h4 class="header-title m-t-0 m-b-20">Marcas</h4>
      <p class="text-muted font-14">
         Permitido até 50 palavras
      </p>
      <div class="tags-default">
         <input type="text" id="marcas"  data-role="tagsinput" placeholder="add tags"/>
      </div>
   </div>
</div>
    
asked by anonymous 18.05.2018 / 21:15

1 answer

1

The working example

$('#palavras_chave').tagsinput({
   maxTags: 3
})

$('#marcas').tagsinput({
   maxTags: 4
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>


<div class="col-md-6">
   <div class="card-box">
      <h4 class="header-title m-t-0 m-b-20">Palavras-chave</h4>
      <p class="text-muted font-14">
         Permitido até 40 palavras
      </p>
      <div class="tags-default">
         <input type="text" id="palavras_chave" data-role="tagsinput" placeholder="add tags"/>
      </div>
   </div>
</div>
<div class="col-md-6">
   <div class="card-box">
      <h4 class="header-title m-t-0 m-b-20">Marcas</h4>
      <p class="text-muted font-14">
         Permitido até 50 palavras
      </p>
      <div class="tags-default">
         <input type="text" id="marcas"  data-role="tagsinput" placeholder="add tags"/>
      </div>
   </div>
</div>
    
18.05.2018 / 21:48