Limit tags in bootstrap-tagsinput v0.8.0

Asked

Viewed 155 times

0

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

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

This way makes the limitation equal in both. But how do I so that when I have two inputs, limit 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>
jquery

  • Face a read in the plugin documentation.

  • where I get the documentation?

  • 1

    https://github.com/bootstrap-tagsinput/bootstrap-tagsinput

  • 1

    https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

  • ali talks to do like $('input'). tagsinput({ maxTags: 3 }); Thus makes the limitation equal in the two. But how do I so that when I have two inputs, limit 3 to one and 10 to the other?

  • If you put here the code you have already developed is easier to get help on the site.

  • edited my answer with what you asked for

Show 2 more comments

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>
<script src="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>

  • didn’t work for me, there’s some example?

  • would put a class in input and call in juqery?

  • I tried $(Document). ready(Function() { $('.palavras_key').tagsinput(voltar // takes the first input maxTags: 3 }); }); but it did not work

  • It won’t work even the way you put it. In your HTML you’re putting the word_keys as id and so you have to call in jQuery with # and not . like you did. It has to be $('#keyword') to work.

  • put the $('#palavras_key') and also did not work, would have some working example?

  • Ta running blza.

  • 1

    If it was helpful the answer mark it as answered to close it.

Show 2 more comments

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.