Keywords with Jquery

0

I would like to do something like:

Foreverywordtheusertypes,itlooksliketheimageabove.

TheclosestIcouldgetwastoknowthenumberofwordshetyped,followthecodebelow:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><divclass="row">
                    <div class="input-field col s12">
                        <input id="first_name" type="text" class="validate palavras-chaves">
                        <label for="first_name">Palavras Chaves</label>
                    </div>
                </div>
<script type="text/javascript">
var palavrasChaves = $(".palavras-chaves");
palavrasChaves.on("input",function(){
        var conteudo = palavrasChaves.val();
        var qntdPalavras = conteudo.split(/\S+/).length -1;
        console.log(qntdPalavras);
 
    });
    
    </script>
    
asked by anonymous 05.11.2018 / 19:37

3 answers

1

If you are using jQuery, one that I have already used and is quite easy to use is bootstrap tags input .

  

OBS: It only works until the Bootstrap version 3.3.7

$("input").tagsinput('items')
<link href="https://maxcdn.bootstrapcdn.com/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://ajax.googleapis.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>

<input type="text" value="teste" data-role="tagsinput" />
    
05.11.2018 / 20:37
0

You're using jQuery, you could use a plugin like TaggingJS and with this line you would solve your problem. $('#inputDaTag').tagging();

    
05.11.2018 / 20:26
0

I used this and it was really cool:

link

Just reference the js and css files on the page and leave your input like this:

 <input id="first_name" type="text" data-role="tagsinput" class="form-control">
    
05.11.2018 / 20:39