select2-검색 창 숨기기

더 중요한 선택의 경우 Select2의 검색 상자가 훌륭합니다. 그러나, 하나의 경우, 4 가지 하드 코딩 된 선택 중에서 간단하게 선택할 수 있습니다. 이 경우 검색 창은 불필요한 것이며 약간 어리석은 것처럼 보입니다. 어떻게 든 숨길 수 있습니까? 온라인 설명서를 살펴 보았으며 생성자에서 이에 대한 옵션을 찾을 수 없습니다.

물론 일반 html select를 사용할 수는 있지만 일관성을 위해 가능한 경우 Select2를 사용하고 싶습니다.

이 스레드 https://github.com/ivaynberg/select2/issues/489를 참조하십시오 . minimumResultsForSearch를 음수 값으로 설정하여 검색 상자를 숨길 수 있습니다.

$('select').select2({
    minimumResultsForSearch: -1
});

예제 페이지에 있습니다 : https://select2.org/searching#hiding-the-search-box

$(".js-example-basic-hide-search").select2({
  minimumResultsForSearch: Infinity
});

.no-search .select2-search {
    디스플레이 : 없음
}

$ ( "# test"). select2 ({
    dropdownCssClass : '검색 안함'
}); 

버전 4.0.3

사용자 인터페이스 요구 사항을 JavaScript 코드와 혼합하지 마십시오.

다음 속성을 사용하여 마크 업에서 검색 창을 숨길 수 있습니다.

data-minimum-results-for-search="Infinity"

마크 업

<select class="select2" data-minimum-results-for-search="Infinity"></select>

예

$(document).ready(function() {
  $(".select2").select2();
});

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

<label>without search box</label>
<select class="select2" data-width="100%" data-minimum-results-for-search="Infinity">
  <option>one</option>
  <option>two</option>
</select>

<label>with search box</label>
<select class="select2" data-width="100%">
  <option>one</option>
  <option>two</option>
</select>

jQuery로 입력을 제거하면 효과가 있습니다.

$(".select2-search, .select2-focusser").remove();

이것은 최선의 해결책이며 깨끗하고 잘 작동합니다.

$("#select2Id").select2 () ;
$("#select2Id").select2 ('container').find ('.select2-search').addClass ('hidden') ;

그런 다음 클래스를 만듭니다 .hidden { display;none; }

특정 드롭 다운에 대한 검색을 숨기려면 id 속성을 사용하십시오.

$('#select_id').select2({ minimumResultsForSearch: -1 });

선택 결과가 표시되면 다음을 사용해야합니다.

$('#yourSelect2ControlId').select2("close").parent().hide();

검색 결과 상자를 닫고 컨트롤을 보이지 않게 설정합니다.

선택의 옵션 수에 따라 동적으로 수행하고 싶습니다. 10 개 이하의 결과가있는 선택에 대한 검색을 숨기려면 다음을 수행하십시오.

$fewResults = $("select>option:nth-child(11)").closest("select");
$fewResults.select2();
$('select').not($fewResults).select2({ minimumResultsForSearch : -1 });

//Disable a search on particular selector
$(".my_selector").select2({
    placeholder: "ÁREAS(todas)",
    tags: true,
    width:'100%',
    containerCssClass: "area_disable_search_input" // I add new class 
});

//readonly prop to selector class
$(".area_disable_search_input input").prop("readonly", true);

//readonly on all select2 input
$(".select2-search input").prop("readonly", true);

선택에 다중 속성이 있으면이 더러운 핵이 작동합니다.

var multipleSelect = $('select[name="list_type"]');
multipleSelect.select2();
multipleSelect.parent().find('.select2-search--inline').remove();
multipleSelect.on('change', function(){
    multipleSelect.parent().find('.select2-search--inline').remove();
});

https://select2.org/searching#limiting-display-of-the-search-box-to-large-result-sets 문서는 여기를 참조하십시오.

처음 열 때 숨기고 ajax 호출을 통해 드롭 다운을 채우려면 select2 선언의 ajax 블록에 다음을 추가하십시오.

beforeSend: function () 
  {
    $('.select2-search--dropdown').addClass('hidden');
  }

그런 다음 Ajax 요청이 성공한 후 다시 표시하고 초점을 맞추십시오.

  success: function() {
      $('.select2-search--dropdown').removeClass('select2-search--hide'); // show search bar then focus
      $('.select2-search__field')[0].focus();
  }

당신은 이것을 시도 할 수 있습니다

$('#select_id').select2({ minimumResultsForSearch: -1 });

검색 결과 상자를 닫고 컨트롤을 보이지 않게 설정합니다.

select2 문서에서 확인할 수 있습니다. select2 문서

@Misha Kobrin의 답변이 나를 위해 잘 작동하므로 더 설명하기로 결정했습니다.

jQuery로 검색 창을 숨기려고합니다.

예를 들어 id 잠재 고객이있는 드롭 다운에서 select2 플러그인을 초기화했습니다.

element_select = '#audience';// id or class
$(element_select).select2("close").parent().hide();

이 예는 select2가 작동하는 모든 장치에서 작동합니다.

생성 된 입력 필드를 select2.min.js로 설정하기 위해 파일을 편집 select-2__search했습니다 readonly="true".

다중 선택의 경우 js 코드를 작성해야하며 설정 특성이 없습니다.

$('#js-example-basic-hide-search-multi').select2();

$('#js-example-basic-hide-search-multi').on('select2:opening select2:closing', function( event ) {
    var $searchfield = $(this).parent().find('.select2-search__field');
    $searchfield.prop('disabled', true);
});

이 페이지에서 언급했습니다 : https://select2.org/searching#multi-select

이 CSS를보십시오

input[aria-controls=select2-product-type-results]{
  display: none;
}

이 입력은 검색 필드입니다