select2 - 隱藏搜索框

Question

對於我更重要的選擇，Select2中的搜索框非常棒。但是，在一個例子中，我選擇了4個硬編碼選項。在這種情況下，搜索框是多餘的，看起來有點傻。有可能以某種方式隱藏它？我在網上查看了文檔，在構造函數中找不到任何選項。

我當然可以使用常規的html選項，但爲了保持一致性，我希望儘可能使用Select2。

Answer 1

看到此線程https://github.com/ivaynberg/select2/issues/489，您可以通過將minimumResultsForSearch設置爲負值來隱藏搜索框。

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

Answer 2

拆卸與jQuery的投入工作對我來說：

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

Answer 3

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

$("#test").select2({ 
    dropdownCssClass : 'no-search' 
}); 

Answer 4

如果選擇是顯示結果中的一個已使用此：

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

它關閉搜索結果然後將控件設置爲不可見

Answer 5

這是最好的解決方案，清潔和良好的工作：

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

然後，創建一個類.hidden { display;none; }

Answer 6

你可以把.select2盒一個div，然後隱藏在div而非實際.select2框

$('#parentDiv').hide();

<div id="parentDiv"> 
 
    <select id="myHiddenField"></select> 
 
</div>

Answer 7

@Misha科布林對我的回答工作做好所以我決定來解釋它更多

你想隱藏搜索框，你可以通過jQuery做到這一點。

例如，你已經初始化選擇2插件上的下拉ID爲觀衆

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

的示例工作在其上選擇2作品的所有設備。

Answer 8

我喜歡根據select中選項的數量動態地執行此操作;隱藏與10分或更少的結果選擇搜索，我做的：

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

Answer 9

這是他們的榜樣頁：https://select2.github.io/examples.html#hide-search

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

Answer 10

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

Answer 11

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

Answer 12

版本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>

Answer 13

我編輯的select2.min.js文件來設置系統產生於readonly="true"的select-2__search輸入字段。

Answer 14

如果你想隱藏在初次打開，你是通過填充Ajax調用的下拉列表中，添加以下到AJAX塊在你選擇2聲明：

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