다중 선택 상자는 부모

Question

내가 v4.0.3에서 선택 2를 사용하고 함께 검색 할

나는 아이들을 검색 할 때, 예를 들어, "하위 카테고리 1"검색 "카테고리 1"을 표시하고 부모 또한 위에 있습니다.

https://ibb.co/iNAdLG

그러나, 나는 "카테고리 1"을 검색 할 때 그것은 나에게 아이들 중 하나를 표시하지 않습니다. 나는 문서화와 여러 접근법을 검토했지만 나에게 도움이되지는 못했다. 참조 코드의

https://ibb.co/eVuSEb

부속서 이미지

$("#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' 
 
    }, 
 
    ] 
 
});

<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>

나는, 세심 사용자 정의 정규 기능을 구현하여

이

Answer 1

당신이 이것을 달성 할 수있는 대단히 감사합니다 .

$(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' 
 
    }, 
 
    ] 
 
}); 
 
});

<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>