select2 - 검색 상자 숨기기

select2 - 검색 상자 숨기기

저의 더 중요한 선택을 위해, Select2의 검색 상자는 훌륭합니다.하지만 한 가지 예로 하드 코딩된 4가지 선택 항목을 간단하게 선택할 수 있습니다.이 경우 검색 상자는 불필요하며 존재하는 것이 약간 바보처럼 보입니다.어떻게든 숨길 수 있을까요?온라인 설명서를 살펴봤는데 생성자에서 이에 대한 옵션을 찾을 수 없었습니다.

물론 일반 HTML 셀렉트를 사용할 수도 있지만, 일관성을 위해 가능하다면 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
});

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

.no-search .select2-search {화면표시:표시}
$("#test").2개의 상품을 선택합니다.드롭다운 CssClass : '검색 없음'});

jQuery를 사용하여 입력을 제거하면 다음과 같은 이점이 있습니다.

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

다음 중 하나를 설정할 수 있습니다.infinity또는-1위해서minimumResultsForSearch선택

솔루션 1

참조: https://select2.org/searching#limiting-display-of-the-search-box-to-large-result-sets

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

솔루션 2

참조: https://select2.org/searching#hiding-the-search-box

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

특정 드롭다운에 대한 검색을 숨기려면 해당 드롭다운에 대한 id 특성을 사용합니다.

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

이것은 깨끗하고 작동하기 좋은 최고의 솔루션입니다.

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

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

해보세요.

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

검색 결과 상자를 닫고 컨트롤을 표시하지 않도록 설정합니다.

2개의 문서 선택 2개의 문서 선택에서 확인할 수 있습니다.

선택 항목의 옵션 수에 따라 동적으로 이 작업을 수행하고, 결과가 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();
  }

이 CSS를 사용해 보세요.

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

이 입력은 검색 필드입니다.

누군가가 이 문제에 실패할 경우를 대비하여 이제 생성자에 질문이 찾던 것에 더 가까운 검색 숨기기 옵션이 있습니다.

echo Select2::widget([ 'name' => 'status','hideSearch' => true, 'data' => [1 => 'Active', 2 => 'Inactive']]);

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

선택 항목이 결과 표시인 경우 다음을 사용해야 합니다.

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

검색 결과 상자를 닫고 컨트롤을 표시하지 않도록 설정합니다.

@미샤 코브린의 대답이 저에게 잘 맞아서 좀 더 설명을 해드리기로 했습니다.

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 입니다.

언급URL : https://stackoverflow.com/questions/17480040/select2-hiding-the-search-box