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
3
Answers
Just remove all whitespaces from the tag?
Then
tt tt
will becometttt
, the rest of the functionality still work. Applying to your codepen: https://codepen.io/anon/pen/zeRoOv?editors=1010First method:
in your create tag search for element starting with….. From:
TO:
Second method:
Use select2:selecting in order to prevent new tags starting with unwanted prefix:
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.
Just add the following code:
Use
Keydown
event. When a key is pressed, the function will get thekeycode
.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.