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

它关闭搜索结果框，然后将控件设置为不可见

我喜欢根据select中的选项数量动态地执行此操作；隐藏具有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);

如果您在选择中具有多重属性，则此肮脏的hack起作用：

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

此输入是搜索字段