在选择2标签文本防止空间
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在选择2标签文本防止空间相关的知识，希望对你有一定的参考价值。
我对着在选择2无空间创建标签的一些问题。当我按下像TT，然后创建一个新的标签，如果我再次TT是防止写，但是当我按下“TT TT”，然后创建新的标签。我想妨碍两个TT和TT之间的空间。没有足够的空间被允许进入这个标签。我怎么能这样做？提前致谢。
码
$(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：选择2版本是4.0.5
这里是demo链接https://codepen.io/mdshohelrana/pen/daVZNo?editors=1010
答案
......我想妨碍两个TT和TT之间的空间。您可以通过两种不同的方式实现它：
第一种方法：在你的创造元素标签搜索开始.....来源：
if (selectedTags.indexOf(term) > -1)
return null;
至：
var dups = selectedTags.findIndex(function(e)
return e == term.substr(0, e.length + 1).trim();
)
第二种方法：为了防止新的标签开始不需要前缀使用select2:selecting：
.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();
);
这样，如果你只想要避免在一个新的标签空间，你可以简单地PREVEND如果空间包含在新的标签文本默认操作。
$("#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>另一答案
只是删除从代码中所有的空格？
var term = $.trim(params.term).replace(/\s/g,'');
然后tt tt将成为tttt中，其他的功能仍然有效。适用于您的codepen：https://codepen.io/anon/pen/zeRoOv?editors=1010
以上是关于在选择2标签文本防止空间的主要内容，如果未能解决你的问题，请参考以下文章