CODEWITHSUNDEEP
javascriptjqueryajaxjquery-select2
Shohel
Shohel

Reputation: 3934

Prevent space in tag text of select2

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

Upvotes: 1

Views: 3372

Answers (3)

Arun Ahuja
Arun Ahuja

Reputation: 3

Just add the following code:

$(document).on('keydown',".select2-search__field",function(e){  
   if (e.which === 32)  
      return false;  
});

Use Keydown event. When a key is pressed, the function will get the keycode.
The condition will check the keycode and if the spacebar is pressed it will return false.
This will "disable" spacebar and prevent space in tag text of select2.

Upvotes: 0

gaetanoM
gaetanoM

Reputation: 42054

...I want to prevent space between two tt and tt. You can achieve it in two different ways:

First method: in your create tag search for element starting with..... From:

if (selectedTags.indexOf(term) > -1) {
   return null;
}

TO:

var dups = selectedTags.findIndex(function(e) {
       return e  == term.substr(0, e.length + 1).trim();
})

Second method: Use select2:selecting in order to prevent new tags starting with unwanted prefix:

.on('select2:selecting', function(e) {
    if (e.params.args.data.newTag) {
        var term = e.params.args.data.text;
        var selectedTags = $("#pictures_tag_input").val() || [];
        var dups = selectedTags.findIndex(function(e) {
            return e  == term.substr(0, e.length + 1).trim();
        })
        if (dups != -1) {
            e.preventDefault();
        }
   }
});

In this way, if you want only to avoid space in a new tag you may simply prevend default action if a space is contained in the new tag text.

$("#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() || [];
        var dups = selectedTags.findIndex(function (e) {
            return (e.length <= term.length) && (e == term.substr(0, e.length + 1).trim());
        })
        if (dups != -1) {
            return null;
        }

        return {
            id: term,
            text: term,
            selected: true,
            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
}).on('select2:selecting', function (e) {
    if (e.params.args.data.newTag) {
        var term = e.params.args.data.text;
        var selectedTags = $("#pictures_tag_input").val() || [];
        var dups = selectedTags.findIndex(function (e) {
            return (e.length < term.length) && (e == term.substr(0, e.length + 1).trim());
        })
        if (dups != -1) {
            e.preventDefault();
        }
    }
}).on('select2:opening', function (e) {
    var val = $(this).data().select2.$container.find('input');
    if ($(this).val().indexOf(val.val()) != -1) {
        val.val('');
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>


<div class="container">
    <form id="frm">
        <h1>Sample Form</h1>
        <div class="row">
            <div class="col-6">
                <div class="form-group">
                    <label for="pictures_tag_input">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>

Upvotes: 1

AVAVT
AVAVT

Reputation: 7143

Just remove all whitespaces from the tag?

var term = $.trim(params.term).replace(/\s/g,'');

Then tt tt will become tttt, the rest of the functionality still work. Applying to your codepen: https://codepen.io/anon/pen/zeRoOv?editors=1010

Upvotes: 1

Related Questions