Keywords with Jquery

Asked

Viewed 176 times

0

I’d like to do something like:

inserir a descrição da imagem aqui

For every word the user types, it looks like the image above.

The closest I could get was to know the amount of words he typed, follow code below:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="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>

javascript jquery css

  • How you are using Jquery, there are several plugins with this feature. You want something ready or implement "from scratch"?

  • @Renan It would be interesting to implement from scratch, but could tell me which plugins?

  • @Amanda take a look at the link that Renan passed, has several good options

  • I tried to use Taggingjs and even worked in the browser, but the ideal would be to separate by space, because on mobile only applies the formatting when I leave the input. I wonder if I could change?

3 answers

1

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

OBS: it works only 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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>

<input type="text" value="teste" data-role="tagsinput" />

  • how would it look on mobile? ideal would be every time he clicked space...

  • I went to the site that is this link that I put in the answer, and when I type in the input is an arrow on the keyboard, like enter, then he inserts the tag.

  • 1

    To use the space use the option with code 32: $("input").tagsinput({&#xA; confirmKeys: [13, 32]&#xA;})... Code 13 is ENTER.

  • 1

    @Sam thanks, I didn’t really mention that the plugin has several customization options too.

0

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

0

Browser other questions tagged javascript jquery css

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