select2 입력의 크기를 선택한 옵션의 너비와 동일하게 동적으로 조정할 수 있습니까?

Question

저는 스타일링을 위해 jQuery Select2를 사용하여 일련의 인라인 선택 입력을 사용하여 '자연어'검색 양식을 작성하고 있습니다. Select2 입력의 너비는 초기화시 선택한 옵션 너비로 설정되는 것으로 나타납니다. 선택한 옵션이 변경 될 때 너비를 업데이트하는 방법을 알아낼 수 없습니다. 어떤 아이디어?

감사합니다.

Answer 1

봅니다을 yor CSS 파일이 추가 :

.select2-container { 
    width: 100% !important; 
} 

그것은 선택 2 내 크기 조정 문제를 해결

(편집 : 나는 자리 표시자를 사용하지 않는)

Answer 2

당신은 창 크기 조정 기능을 사용할 수 있습니다 .

예 :

// Fix select2 width 
$(window).on('resize', function() { 
    $('.form-group').each(function() { 
     var formGroup = $(this), 
      formgroupWidth = formGroup.outerWidth(); 

     formGroup.find('.select2-container').css('width', formgroupWidth); 

    }); 
}); 

라이브 -

Answer 3

https://jsfiddle.net/Lwy6qnwy/ 그냥 이것은 아마 바보 - 증거와 현재에 묶여있는 사이트

$(e).on("select2:closing", function(e) { 
    if (e.hasOwnProperty('params') && 
     e.params.hasOwnProperty('args') && 
     e.params.args.hasOwnProperty('originalEvent') && 
     e.params.args.originalEvent.hasOwnProperty('target')) { 
      var newWidth = $(e.params.args.originalEvent.target).width(); 
      var id = $(e.params.args.originalEvent.target).attr('id'); 
      var container = $("span[aria-labelledby=\""+id.split("-result")[0]+"-container"+"\"]"); 
      $(container).parents('span.select2').width(newWidth + 21); 
    } 
}); 

이 그런 짓을했다 API. 그러나 드롭 다운이 닫히기 전에 드롭 다운에서 요소의 너비를 가져 와서 컨테이너에 적용합니다.

한 가지주의 할 점은 드롭 다운 항목을 플로팅하여 실제 크기가 필요할 수 있습니다.

.select2-results__option { 
    float: left; 
    clear: both; 
}