Linked Questions

Popular Questions

Prevent space in tag text of select2

Asked by At

I am facing some problem on creating tag without space in select2. When I press like tt then created a new tag, if I write tt again it is preventing but when I press “tt tt” then creating new tag. I want to prevent space between two tt and tt. No space is allowed into this tag. How could I do that? Thanks in advance.

CODE

$(document).ready(function() {
      $("#pictures_tag_input").select2({
        tags: true,
        multiple: true,
        placeholder: "Please type here",
        maximumSelectionSize: 12,
        minimumInputLength: 2,
        tokenSeparators: [",", " "],
        createTag: function(params) {
          // empty string is not allow
          var term = $.trim(params.term);
          if (term === "") {
            return null;
          }
    
          // duplicate check
          var selectedTags = $("#pictures_tag_input").val() || [];
          if (selectedTags.indexOf(term) > -1) {
            return null;
          }
    
          return {
            id: term,
            text: term,
            newTag: true // add additional parameters
          };
        },
        templateResult: function(item) {
          return item.name || item.text;
        },
        templateSelection: function(item) {
          return item.name || item.text;
        },
        escapeMarkup: function(markup) {
          return markup;
        },
        ajax: {
          url: "https://api.myjson.com/bins/444cr",
          dataType: "json",
          global: false,
          cache: true,
          delay: 0,
          data: function(params) {
            return {
              q: params.term
            };
          },
          processResults: function(results, params) {
            // remove existing tag after key press
            var term = $.trim(params.term);
            var searchedTags = $.map(results, function(tag) {
              if (tag.text.match(term) || term === "")
                return { id: tag.id, text: tag.text };
            });
            return {
              results: searchedTags
            };
          } //end of process results
        } // end of ajax
      });
    });
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.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/select2/4.0.5/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>


<div class="container">
  <form id="frm">
    <h1>Sample Form</h1>
    <div class="row">
      <div class="col-4">
        <div class="form-group">
          <label for="tagInput">Tag Input</label>
          <select class="form-control" id="pictures_tag_input"></select>
          <small class="form-text text-muted"><p class="text-info">1) no space in tag 2) create tag dynamically 3) prevent duplicate tag 4) search tag from ajax calling 5) tag create by enter, space and comma 6) at first dot, @ are not allow 7) sometimes tag popup position is not right placed.</p></small>
        </div>
      </div>
    </div>
  </form>
</div>

N.B: select2 version is 4.0.5

Here is the demo link https://codepen.io/mdshohelrana/pen/daVZNo?editors=1010

Related Questions