select2 - ẩn hộp tìm kiếm

Đối với các lựa chọn quan trọng hơn của tôi, hộp tìm kiếm trong Chọn2 là tuyệt vời. Tuy nhiên, trong một trường hợp, tôi có một lựa chọn đơn giản gồm 4 lựa chọn được mã hóa cứng. Trong trường hợp này, hộp tìm kiếm là thừa và trông hơi ngớ ngẩn khi có mặt. Có thể che giấu nó bằng cách nào đó? Tôi đã xem qua tài liệu trực tuyến và không thể tìm thấy bất kỳ tùy chọn nào cho việc này trong hàm tạo.

Tất nhiên, tôi có thể chỉ sử dụng một lựa chọn html thông thường, nhưng để thống nhất tôi muốn sử dụng Chọn2 nếu có thể.

Xem chủ đề này https://github.com/ivaynberg/select2/issues/361 , bạn có thể ẩn hộp tìm kiếm bằng cách đặt minimResultsForSearch thành giá trị âm.

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

Nó trên trang Ví dụ của họ: https://select2.org/searching#hiding-the-search-box

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

.no-search .select2-search {
    không trưng bày
}

$ ("# kiểm tra"). select2 ({
    dropdownCssClass: 'không tìm kiếm'
}); 

Phiên bản 4.0.3

Cố gắng không trộn các yêu cầu giao diện người dùng với mã JavaScript của bạn.

Bạn có thể ẩn hộp tìm kiếm trong phần đánh dấu bằng thuộc tính:

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

Đánh dấu

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

Thí dụ

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

Loại bỏ các đầu vào với jQuery hoạt động với tôi:

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

Đây là giải pháp tốt nhất, sạch sẽ và hoạt động tốt:

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

Sau đó, tạo một lớp .hidden { display;none; }

Nếu bạn muốn ẩn tìm kiếm cho một thả xuống cụ thể, hãy sử dụng thuộc tính id cho điều đó.

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

Nếu lựa chọn hiển thị kết quả, người ta phải sử dụng:

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

nó đóng hộp kết quả tìm kiếm và sau đó đặt điều khiển không mong muốn

Tôi thích làm điều này một cách linh hoạt tùy thuộc vào số lượng tùy chọn trong lựa chọn; để ẩn tìm kiếm cho các lựa chọn có 10 kết quả hoặc ít hơn, tôi làm:

$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);

Nếu bạn có nhiều thuộc tính trong lựa chọn của mình, hack bẩn này hoạt động:

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();
});

xem tài liệu tại đây https://select2.org/searching#limiting-display-of-the-search-box-to-large-result-sets

Nếu bạn muốn ẩn khi mở lần đầu và bạn đang điền vào danh sách thả xuống thông qua cuộc gọi ajax, hãy thêm phần sau vào khối ajax trong khai báo select2 của bạn:

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

Để sau đó hiển thị lại (và tập trung) sau khi yêu cầu ajax của bạn thành công:

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

Bạn có thể thử cái này

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

nó đóng hộp kết quả tìm kiếm và sau đó đặt điều khiển không mong muốn

Bạn có thể kiểm tra ở đây trong tài liệu select2 tài liệu select2

Câu trả lời của @Misha Kobrin rất tốt cho tôi Vì vậy tôi đã quyết định giải thích thêm

Bạn muốn ẩn hộp tìm kiếm, bạn có thể thực hiện bằng jQuery.

ví dụ: bạn đã khởi tạo plugin select2 khi thả xuống có đối tượng id

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

Ví dụ này hoạt động trên tất cả các thiết bị mà select2 hoạt động.

Tôi đã chỉnh sửa select2.min.jstệp để đặt trường select-2__searchđầu vào được tạo readonly="true".

Đối với đa lựa chọn, bạn phải viết mã js, không có thuộc tính cài đặt.

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

Điều này được đề cập trên trang của họ: https://select2.org/searching#multi-select

thử CSS này

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

đầu vào này là trường tìm kiếm