CODEWITHSUNDEEP
jqueryinputbootstrap-4tags
FrankLar21
FrankLar21

Reputation: 23

Tag input: change tag when it's 2 spaces instead of one

I want to bring a principle of keywords to my project. I am using a bootstrap template for this one. However the template only allows tags with one word. Example: KeyWordOneWord

The separation is done automatically by clicking on the space bar. However, I would like to allow several words, so create the separator with 2 spaces (It may not be the best way, I listen to your suggestions). This is a site related to the school environment, so the user can enter a program name with 2 words, currently I am able to do it with a / (without having touched the code)

KeyWord2word

I don't have a lot of code to give you other than this:

   <div class="col-md-12">
      <div class="form-group">
         <label><strong>Liste des mots clés:</strong></label>
            <div class="edit-on-delete form-control" data-tags-input-name="edit-on-delete" id="etabMotsClef" name="etabMotsClef"></div>
      </div>
   </div>

  // Edit / Delete tag on delete
    $(".edit-on-delete").tagging({
        "edit-on-delete": false,
    });

And if it's allowed I can put yours from the template:

https://pixinvent.com/stack-responsive-bootstrap-4-admin-template/html/ltr/vertical-modern-menu-template/form-tags-input.html

///UPDATE

With help from @User863 this is what my code looks like:

$("#etabMotsClef").tagging({
            'no-spacebar': true, // default - false
            'forbidden-chars': [".", "_", "?", "  "], // double space added
            "forbidden-chars-callback": function () {
                sweetAlertInput("Vous ne pouvez utiliser ce caractère ", "etabMotsClef");
            },
            'no-duplicate-callback': function () {
                sweetAlertInput("Vous avez déjà utilisé ce mot clé ", "etabMotsClef");
            },
            'no-duplicate': true,
            'no-enter': false,
            'tags-limit': 5,
            'no-del': true,
            'no-quote': true,
            'edit-on-delete': false,
            'no-comma': true
        });

Upvotes: 0

Views: 469

Answers (1)

User863
User863

Reputation: 20039

Try using no-spacebar option

https://github.com/sniperwolf/taggingJS#available-options

$("#tagBox").tagging({
  'no-spacebar': true, // default - false
  'forbidden-chars': ["," , ".", "_", "?", "  "] // double space added
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/sniperwolf/taggingJS/example/tag-basic-style.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/gh/sniperwolf/taggingJS/tagging.min.js"></script>

<div data-tags-input-name="tag" id="tagBox">preexisting-tag</div>

Upvotes: 1

Related Questions