多选框不能与父级搜索

Question

我在v4.0.3中使用select2

当我搜索孩子时，例如＆＃34;子类别1＆＃34;，搜索出现，您的父母＆＃34;类别1＆＃34;也位于上方。

https://ibb.co/iNAdLG

但是，当我搜索＆＃34;类别1＆＃34;它没有告诉我任何孩子。我已经审阅了文档和几种方法，但没有一种对我有用。

https://ibb.co/eVuSEb

参考图像和代码

＆＃13;

＆＃13;

$("#multisearch").select2({
  language: "es",
  closeOnSelect: false,
  placeholder: "Comienza tu búsqueda",
  data: [{
      id: 0,
      text: 'Linea 1',
      children: [{
          id: 1,
          text: 'San Pablo'
        },
        {
          id: 2,
          text: 'Pajaritos'

        },
        {
          id: 3,
          text: 'Las Rejas'
        },
        {
          id: 4,
          text: 'Ecuador'
        }
      ]
    },
    {
      id: 5,
      text: 'Linea 2',
      children: [{
          id: 6,
          text: 'La Cisterna'
        },
        {
          id: 7,
          text: 'El Parrón'

        },
        {
          id: 8,
          text: 'Lo Ovalle'
        },
        {
          id: 9,
          text: 'Ciudad del niño'
        },
        {
          id: 10,
          text: 'Pajaritos'
        }
      ]
    },
    {
      id: 1,
      text: 'prueba'
    },
  ]
});

＆＃13;

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>


<select multiple id="multisearch" style="width:500px">
</select>

＆＃13;

＆＃13;

＆＃13;

我会很专心，非常感谢你

Answer 1

您可以通过实现自定义匹配器功能来实现此目的。

请查看以下示例：

＆＃13;

＆＃13;

$(document).ready(function(){

function customMatcher(params, data) {
        data.parentText = data.parentText || "";
        if ($.trim(params.term) === '') {
            return data;
        }

        if (data.children && data.children.length > 0) {
            var match = $.extend(true, {}, data);
            for (var c = data.children.length - 1; c >= 0; c--) {
                var child = data.children[c];
                child.parentText += data.parentText + " " + data.text;

                var matches = customMatcher(params, child);

                if (matches == null) {
                    match.children.splice(c, 1);
                }
            }

            if (match.children.length > 0) {
                return match;
            }

            return customMatcher(params, match);
        }

        var original = (data.parentText + ' ' + data.text).toUpperCase();
        var term = params.term.toUpperCase();

        if (original.indexOf(term) > -1) {
            return data;
        }

        return null;
    }
    
$("#multisearch").select2({
  language: "es",
  closeOnSelect: false,
  matcher: customMatcher,
  placeholder: "Comienza tu búsqueda",
  data: [{
      id: 0,
      text: 'Linea 1',
      children: [{
          id: 1,
          text: 'San Pablo'
        },
        {
          id: 2,
          text: 'Pajaritos'

        },
        {
          id: 3,
          text: 'Las Rejas'
        },
        {
          id: 4,
          text: 'Ecuador'
        }
      ]
    },
    {
      id: 5,
      text: 'Linea 2',
      children: [{
          id: 6,
          text: 'La Cisterna'
        },
        {
          id: 7,
          text: 'El Parrón'

        },
        {
          id: 8,
          text: 'Lo Ovalle'
        },
        {
          id: 9,
          text: 'Ciudad del niño'
        },
        {
          id: 10,
          text: 'Pajaritos'
        }
      ]
    },
    {
      id: 1,
      text: 'prueba'
    },
  ]
});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>


<select multiple id="multisearch" style="width:500px">
</select>

＆＃13;

＆＃13;

＆＃13;