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

Question

我希望我的问题是有道理的 - 不确定描述这个问题的最佳方式。我有一个分组的 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

我调换了代码的顺序，并对变量名进行了一些细微的更改以反射(reflect)这一点。我认为这将使选项组保持打开状态。我试图基于此制作自定义匹配器(请参阅我的 Gist)，但我被困在它调用 DIACRITICS 的地方:

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

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

现在我的匹配器因 TypeError: data.indexOf is not a function 而失败。 (在 'data.indexOf(term)' 中，'data.indexOf' 未定义) 我的浏览器出现错误。

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

更新

这是我正在使用的 JSfiddle:

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

Answer 1

我从你的问题中了解到，当 option 文本或 option 匹配时，你希望能够显示 option 以供选择 的父 optgroup 值属性。

这相对简单:主要是查看两个值，如果其中一个匹配，则使用 Select2 的 matcher 选项返回 true:

(注意:使用 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 中 检查。

此外，如果显示了 optgroup 的任何子项，则会显示它，因此您只需担心显示一个或多个 option，而不是实际上通过手动显示来“显示”optgroup。

如果您有不同的要求，请提供一个(工作/非工作？)演示 fiddle ，展示您拥有的我们可以实际运行它的地方。

编辑

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

请注意，它正在为子元素(optgroup 元素中的 option 元素)调用自身，因此 modelMatcher() 针对这两个元素运行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/