我希望我的问题有道理 - 不能确定最好的描述方式。我有一个分组的Select2选择表单输入如下：
所以你开始输入App，当然你从Select2下拉列表中得到Apples。如果您输入veg，则会获得Vegemite和Vegetables组标题，但所有选项都会隐藏。如果搜索字词与组标题匹配，我想保持所有组选项可见。
我在select2源代码中做了一些挖掘，我认为它实际上很容易，但我可能是错的，如果我是对的，我会被困在如何使其工作。这是源代码： https://github.com/select2/select2/blob/81a4a68b113e0d3e0fb1d0f8b1c33ae1b48ba04f/src/js/select2/defaults.js：
我创建了一个Gist，试图将其粘贴到此处：
https://gist.github.com/jasper502/40b810e55b2195476342
我切换了代码的顺序并进行了一些轻微的变量名称更改以反映这一点。我认为这将使期权组保持开放。我试图基于此创建一个自定义匹配器（请参阅我的要点），但我被卡在DIACRITICS调用的位置：
经过一些谷歌搜索，我意识到这正在取代重音字符，我知道我不会这样做，所以我删除了那部分。
现在我的匹配器在浏览器中出现TypeError: data.indexOf is not a function. (In 'data.indexOf(term)', 'data.indexOf' is undefined)
错误时失败了。
我相信我在这里非常接近，但我有点超过我的经验和/或技能水平以完成这个。任何指针或想法都将不胜感激。
更新
以下是我正在使用的JSfiddle：
答案 0 :(得分：12)
我从您的问题中收集的内容是，您希望能够在option文字或option＆＃匹配时显示option以供选择39; s父optgroup值属性。
这是相对简单的：主要是，查看两个值，如果匹配，return true使用Select2＆＃39; matcher选项：
（注意：使用Select2 v3.5.4。）
(function() {
function matcher(term, text, opt) {
var $option = $(opt),
$optgroup = $option.parent('optgroup'),
label = $optgroup.attr('label');
term = term.toUpperCase();
text = text.toUpperCase();
if (text.indexOf(term) > -1
|| (label !== undefined
&& label.toUpperCase().indexOf(term) > -1)) {
return true;
}
return false;
}
$(".select2").select2({
matcher: matcher
});
})();
https://jsfiddle.net/xfw4tmbx/2/
v4。*及以上将term和text更改为更复杂的对象，因此它会略有不同，但主要概念是相同的。正如您所看到的，我所做的就是使用jQuery来选择option的父级，如果它是optgroup元素，并且包括matcher {1}}检查。
此外，optgroup会显示是否显示了其中的任何一个孩子，因此您只需担心显示一个或多个option，以及实际上并没有＃34;显示＆＃34; optgroup通过手动显示它。
如果您有不同的要求，请提供一个（工作/不工作？）示范小提示，显示您实际运行的地方。
修改
Select2自定义匹配在4.0版本中发生了显着变化。这是一个发布到此GitHub issue的自定义匹配器。为了完整性，它按原样复制。
请注意，它为子元素（option元素中的optgroup元素）调用自身，因此modelMatcher()正在针对optgroup <运行em>和 option元素，但在删除不匹配的optgroup和option元素后会返回组合集。在上面的版本中，您获得了每个option元素，如果您希望它（和父元素）显示，则只返回true / false。不是 更复杂，但你必须多考虑一下。
(function() {
function modelMatcher(params, data) {
data.parentText = data.parentText || "";
// Always return the object if there is nothing to compare
if ($.trim(params.term) === '') {
return data;
}
// Do a recursive check for options with children
if (data.children && data.children.length > 0) {
// Clone the data object if there are children
// This is required as we modify the object to remove any non-matches
var match = $.extend(true, {}, data);
// Check each child of the option
for (var c = data.children.length - 1; c >= 0; c--) {
var child = data.children[c];
child.parentText += data.parentText + " " + data.text;
var matches = modelMatcher(params, child);
// If there wasn't a match, remove the object in the array
if (matches == null) {
match.children.splice(c, 1);
}
}
// If any children matched, return the new object
if (match.children.length > 0) {
return match;
}
// If there were no matching children, check just the plain object
return modelMatcher(params, match);
}
// If the typed-in term matches the text of this term, or the text from any
// parent term, then it's a match.
var original = (data.parentText + ' ' + data.text).toUpperCase();
var term = params.term.toUpperCase();
// Check if the text contains the term
if (original.indexOf(term) > -1) {
return data;
}
// If it doesn't contain the term, don't return anything
return null;
}
$(".select2").select2({
matcher: modelMatcher
});
})();