select2 데이터 행의 한 행에 두 개 이상의 공백 문자를 표시하려면 어떻게합니까?

Question

Select2을 사용 중이며 {data: [{id:1, text: "..."}] 접근 방식을 사용하여 옵션을 정의합니다. 두 개 이상의 공백 문자를 사용하여 구성된 하위 문자열을 그룹화하여 각 옵션의 서식을 지정하려고합니다. 이 같은 뭔가 : 나는이 작업을 수행 할 때

{data: [ 
    {id:1, text: "Trees  -  Oak"}, 
    {id:2, text: "Trees  -  Pine"}, 
    {id:3, text: "Seas  -  North Sea"}, 
    {id:4, text: "Seas  -  Baltic Sea"} 
]} 

들이 결과 드롭 다운에서 하나 개의 공간 (공간 처리의 기본 HTML 방식)으로 표시됩니다. 공백 대신  을 사용하면 공백 대신 드롭 다운에 " "문자열로 표시됩니다.

{data: [ 
    {id:1, text: "Trees   -   Oak"}, 
    {id:2, text: "Trees   -   Pine"}, 
    {id:3, text: "Seas   -   North Sea"}, 
    {id:4, text: "Seas   -   Baltic Sea"} 
]} 

내가 데이터 항목의 text 속성에 정의 된 모든 공간을 보존 할 수있는 방법이 있습니까?

Answer 1

대신 optgroups을 사용하고 싶지 않으십니까?

{data: [ 
    { 
    text: "Trees", 
    children: [ 
     {id:1, text: "Oak"}, 
     {id:2, text: "Pine"}, 
    ] 
    }, 
    { 
    text: "Seas", 
    children: [ 
     {id:1, text: "North Sea"}, 
     {id:2, text: "Baltic Sea"}, 
    ] 
    }, 
]} 

또는 문자열의 모든 공백을 보존하기의 선택 항목의 CSS 클래스에

white-space: pre; 

를 추가하려고합니다.

.select2-container--default .select2-results__option { 
    white-space: pre; 
} 

Answer 2

유리 뜨거운가 선택 2 생성에 escapeMarkup을  를 사용하여 포함하는 것입니다 준 답에 대한 대안 : koenpeters 댓글에서 말했듯이

, 기본 테마의 CSS를 위해 같이 표시됩니다.

$("#isOfTheSelectNode").select2({ 
    escapeMarkup: function (m) { return m; } 
}); 

단점은 다음과 같습니다 HTML 마크 업의

• 없음 이스케이프되지 않습니다, 텍스트가 HTML이 포함 된 경우 이상한 option 요소가 발생할 수있다.
• 공백을 검색 할 때  이 포함 된 항목은 일치하지 않습니다.

여러 공간을 렌더링 할 수있게하려는 경우 Yuri Gor의 답변이 더 좋다고 생각합니다.