从 Select2 搜索结果中排除现有标签
Exclude existing tags from Select2 search results
我正在使用 Select2 ("select2": "^4.0.6-rc.1"
),如下所示,大部分情况下运行良好。
但现在我们要防止的情况是:
An admin wants to add TagXyz but does not see that this tag already exists (because there is already a long list of selected tags) and so starts typing the name of the tag and then presses Enter, thinking he added the tag, but in reality, it would remove the existing tag because it had already existed!
如何从 Select2 搜索结果中排除现有标签(或以其他方式实现我的目标)?
我想也许我应该添加 matcher: matchCustom,
(如 docs 中所建议)并使我的 matchCustom 排除当前标签。
因此,作为我的 matchCustom 函数的起点,我尝试在 https://github.com/select2/select2/blob/4.0.6-rc.1/dist/js/select2.js#L4931 复制 matcher
函数,但发现我需要访问 stripDiacritics
函数。
我该怎么办?
var tagsSelect = $('select[name=tags]');
tagsSelect.select2({
placeholder: 'Choose tags here',
tokenSeparators: [',', ' '], //https://select2.org/tagging
theme: "classic",
width: "style" //element, style, resolve, or '<value>' https://select2.org/appearance#container-width
}).on('select2:select', function (e) {
var data = e.params.data;
addTag($(this).attr('data-contactId'), data.id, data.text);// https://select2.org/programmatic-control/events
}).on('select2:unselect', function (e) {
var data = e.params.data;
var contactTagId = data.element.getAttribute('data-contacttagid');//
removeTag(contactTagId, data.text); // https://select2.org/programmatic-control/events
}).on('select2:unselecting', function (event) {
var label = event.params.args.data.text;
var opt = tagsSelect.find('option[value="' + event.params.args.data.id + '"]').first();
if (opt.is(':disabled')) {
event.preventDefault();
}
}).on('change', function (event) {
changeClassOfDisabledTags();
});
我想我解决了。
const DIACRITICS = require('select2/src/js/select2/diacritics.js');
function stripDiacritics(text) {
// Used 'uni range + named function' from http://jsperf.com/diacritics/18
function match(a) {
return DIACRITICS[a] || a;
}
return text.replace(/[^\u0000-\u007E]/g, match);
}
那么这是我的 matchCustom 的相关部分:
if (original.indexOf(term) > -1) {
var modifiedData = $.extend({}, data, true);
//modifiedData.text += ' (matched)';
// You can return modified objects from here
// This includes matching the `children` how you want in nested data sets
if (modifiedData.selected) {
return null;//exclude existing (selected) tags from search results
} else {
return modifiedData;
}
}
我正在使用 Select2 ("select2": "^4.0.6-rc.1"
),如下所示,大部分情况下运行良好。
但现在我们要防止的情况是:
An admin wants to add TagXyz but does not see that this tag already exists (because there is already a long list of selected tags) and so starts typing the name of the tag and then presses Enter, thinking he added the tag, but in reality, it would remove the existing tag because it had already existed!
如何从 Select2 搜索结果中排除现有标签(或以其他方式实现我的目标)?
我想也许我应该添加 matcher: matchCustom,
(如 docs 中所建议)并使我的 matchCustom 排除当前标签。
因此,作为我的 matchCustom 函数的起点,我尝试在 https://github.com/select2/select2/blob/4.0.6-rc.1/dist/js/select2.js#L4931 复制 matcher
函数,但发现我需要访问 stripDiacritics
函数。
我该怎么办?
var tagsSelect = $('select[name=tags]');
tagsSelect.select2({
placeholder: 'Choose tags here',
tokenSeparators: [',', ' '], //https://select2.org/tagging
theme: "classic",
width: "style" //element, style, resolve, or '<value>' https://select2.org/appearance#container-width
}).on('select2:select', function (e) {
var data = e.params.data;
addTag($(this).attr('data-contactId'), data.id, data.text);// https://select2.org/programmatic-control/events
}).on('select2:unselect', function (e) {
var data = e.params.data;
var contactTagId = data.element.getAttribute('data-contacttagid');//
removeTag(contactTagId, data.text); // https://select2.org/programmatic-control/events
}).on('select2:unselecting', function (event) {
var label = event.params.args.data.text;
var opt = tagsSelect.find('option[value="' + event.params.args.data.id + '"]').first();
if (opt.is(':disabled')) {
event.preventDefault();
}
}).on('change', function (event) {
changeClassOfDisabledTags();
});
我想我解决了。
const DIACRITICS = require('select2/src/js/select2/diacritics.js');
function stripDiacritics(text) {
// Used 'uni range + named function' from http://jsperf.com/diacritics/18
function match(a) {
return DIACRITICS[a] || a;
}
return text.replace(/[^\u0000-\u007E]/g, match);
}
那么这是我的 matchCustom 的相关部分:
if (original.indexOf(term) > -1) {
var modifiedData = $.extend({}, data, true);
//modifiedData.text += ' (matched)';
// You can return modified objects from here
// This includes matching the `children` how you want in nested data sets
if (modifiedData.selected) {
return null;//exclude existing (selected) tags from search results
} else {
return modifiedData;
}
}