如果组标题匹配，则选择 2 自定义匹配器以保持选项打开

Question

我希望我的问题是有道理的 - 不确定描述这个问题的最佳方式。我有一个分组的 Select2 select 表单输入，如下所示：

蔬菜
生菜
西红柿
洋葱
水果
苹果
橘子
香蕉
点差
素食主义者
花生酱
花生酱

所以您开始输入 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:

的地方

https://github.com/select2/select2/blob/8ad8f200ba8c9429d636453b8ee3bcf593e8c87a/src/js/select2/diacritics.js

经过一些谷歌搜索后，我意识到这是在替换我知道我没有的重音字符，所以我删除了那部分。

现在我的匹配器在浏览器中出现 TypeError: data.indexOf is not a function. (In 'data.indexOf(term)', 'data.indexOf' is undefined) 错误。

我确定我已经很接近了，但我有点难以理解，超出了我的经验 and/or 技能水平来完成这项工作。任何指示或想法将不胜感激。

更新

这是我正在使用的 JSfiddle：

https://jsfiddle.net/jasper502/xfw4tmbx/9/

Answer 1

我从你的问题中了解到，当 option 文本或 option 的父 optgroup 值属性。

这相对简单：主要是查看两个值，如果其中一个匹配，return true 使用 Select2 的 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 到 select 直至 option 的父元素（如果它是 optgroup 元素并将其包含在 matcher 检查。

此外，如果显示了 optgroup 的任何子项，则会显示它，因此您只需担心显示一个或多个 option，而不是 [=65] =] optgroup 通过手动显示它。

如果您有不同的要求，请提供一个（working/non-working？）演示 fiddle 展示您有什么我们可以实际运行它。

编辑

Select2 自定义匹配在 4.0 版本中发生了显着变化。这是发布到此 GitHub issue 的自定义匹配器。为了完整起见，按原样复制如下。

请注意，它正在为子元素（optgroup 元素中的 option 元素调用自身），因此 modelMatcher() 运行ning 与 optgroup 和 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
    });
})();

https://jsfiddle.net/xfw4tmbx/16/

如果组标题匹配，则选择 2 自定义匹配器以保持选项打开

Select2 Custom Matcher to keep options open if group title matches

javascript

jquery

jquery-select2

jquery-select2-4

select2