... Я хочу предотвратить пробел между двумя tt и tt.Вы можете достичь этого двумя различными способами:
Первый метод: в вашем теге создания поиска для элемента, начинающегося с ..... From:
if (selectedTags.indexOf(term) > -1) {
return null;
}
TO:
var dups = selectedTags.findIndex(function(e) {
return e == term.substr(0, e.length + 1).trim();
})
Второй метод: Использование select2: выбор , чтобы новые теги начинались с нежелательного префикса:
.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();
}
}
});
Таким образом, если вы хотите избежать пробела в новом теге, вы можете просто сохранить действие по умолчанию, если в тексте нового тега содержится пробел.
$("#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>