选择2自定义匹配器以在组标题匹配时保持选项打开

Question

我希望我的问题有道理 - 不确定最好的方式来形容这一点.我有一个分组的Select2选择表单输入如下:

• 蔬菜
• 生菜
• 番茄
• 洋葱
• 水果
• 苹果
• 桔子
• 香蕉
• 价差
• vegemite发表
• 花生酱
• 花生酱

所以你开始输入App,当然你可以Apples从Select2下拉菜单中获得.如果你输入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) 在我的浏览器中出错了.

我相信我在这里非常接近但是我有点超过我的经验和/或技能水平来完成这个.任何指针或想法将不胜感激.

UPDATE

这是一个与我合作的JSfiddle:

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

Answer 1

我从你的问题中收集的是你希望能够option在option文本或option父元素optgroup值属性中匹配时显示s以供选择.

这是相对简单的:主要是,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来选择option父级,如果它是一个optgroup元素并在matcher检查中包含它.

此外,optgroup如果显示任何一个孩子,将显示,所以你只需要担心显示一个或多个option,而不是optgroup通过手动显示它来实际"显示" .

如果您有不同的要求,请提供(工作/不工作？)示范小提示,显示您实际运行它的地方.

编辑

Select2自定义匹配在4.0版本中发生了显着变化.这是一个发布到此GitHub问题的自定义匹配器.为了完整性,它按原样复制.

请注意,它自称为子元素(在option该范围内的元素optgroup的元素),因此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/