select2 - ซ่อนกล่องค้นหา

สำหรับการเลือกที่สำคัญยิ่งกว่าของฉันช่องค้นหาใน Select2 นั้นยอดเยี่ยม อย่างไรก็ตามในหนึ่งตัวอย่างฉันมีตัวเลือกแบบง่าย ๆ ในการกำหนดค่าตายตัว 4 ตัวเลือก ในกรณีนี้ช่องการค้นหาไม่จำเป็นและดูโง่เล็กน้อย เป็นไปได้หรือไม่ที่จะซ่อนมันไว้? ฉันดูเอกสารออนไลน์และไม่พบตัวเลือกใด ๆ สำหรับสิ่งนี้ในตัวสร้าง

แน่นอนว่าฉันสามารถใช้ html select ปกติได้ แต่สำหรับความสอดคล้องฉันต้องการใช้ Select2 ถ้าเป็นไปได้

ดูที่กระทู้นี้https://github.com/ivaynberg/select2/issues/489คุณสามารถซ่อนกล่องค้นหาโดยการตั้งค่าขั้นต่ำResultsForSearchให้เป็นค่าลบ

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

มันอยู่ในหน้าตัวอย่างของพวกเขา: https://select2.org/searching#hiding-the-search-box

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

.no-search .select2-search {
    display: none
}

$ ( "# ทดสอบ"). 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 ให้เพิ่มรายการต่อไปนี้ในบล็อก ajax ในการประกาศ select2 ของคุณ:

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

ตัวอย่างเช่นคุณได้เริ่มต้นปลั๊กอิน select2 ในรายการแบบหล่นลงมีผู้ชม id

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

ตัวอย่างทำงานบนอุปกรณ์ทั้งหมดที่ select2 ทำงาน

ผมแก้ไขselect2.min.jsไฟล์เพื่อตั้งช่องใส่ที่สร้างขึ้นเพื่อselect-2__searchreadonly="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;
}

อินพุตนี้เป็นช่องค้นหา