229

对于我更重要的选择，Select2 中的搜索框非常棒。但是，在一个实例中，我有 4 个硬编码选项的简单选择。在这种情况下，搜索框是多余的，看起来有点傻。有可能以某种方式隐藏它吗？我浏览了在线文档，在构造函数中找不到任何选项。

当然，我可以只使用常规的 HTML 选择，但为了保持一致性，如果可能，我想使用 Select2。

4

20 回答 20

521

请参阅此线程https://github.com/ivaynberg/select2/issues/489，您可以通过将 minimumResultsForSearch 设置为负值来隐藏搜索框。

$('select').select2({
    minimumResultsForSearch: -1
});
于 2013-07-15T08:30:25.577 回答
50

它在他们的示例页面上：https ://select2.org/searching#hiding-the-search-box

$(".js-example-basic-hide-search").select2({
  minimumResultsForSearch: Infinity
});
于 2016-04-08T11:27:06.610 回答
37 
.no-搜索 .select2-搜索 {
    显示：无
}

$("#test").select2({
    dropdownCssClass：'无搜索'
});
于 2014-03-03T03:44:08.443 回答
35

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

于 2016-11-17T20:43:24.753 回答
21

使用 jQuery 删除输入对我有用：

$(".select2-search, .select2-focusser").remove();
于 2013-10-23T12:08:56.237 回答
5

如果要隐藏对特定下拉列表的搜索，请使用 id 属性。

$('#select_id').select2({ minimumResultsForSearch: -1 });
于 2018-05-19T07:00:21.310 回答
4

这是最好的解决方案，干净且工作良好：

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

然后，创建一个类.hidden { display;none; }

于 2014-10-19T16:05:28.857 回答
3

你可以试试这个

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

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

您可以在此处查看 select2 文档select2 文档

于 2019-07-16T04:39:15.533 回答
1

如果选择是显示结果，则必须使用此：

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

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

于 2014-10-02T07:37:55.537 回答
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);
于 2016-08-12T09:08:06.477 回答
1 
//readonly on all select2 input
$(".select2-search input").prop("readonly", true);
于 2016-08-12T08:07:29.843 回答
1

我喜欢根据选择中的选项数量动态地执行此操作；为了隐藏对 10 个或更少结果的选择的搜索，我这样做：

$fewResults = $("select>option:nth-child(11)").closest("select");
$fewResults.select2();
$('select').not($fewResults).select2({ minimumResultsForSearch : -1 });
于 2015-12-16T16:33:53.407 回答
1

如果您的选择中有多个属性，则此肮脏的技巧有效：

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

于 2019-02-07T12:57:34.160 回答
1

如果您想在初始打开时隐藏并且您正在通过 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();
  }
于 2017-08-08T16:42:33.440 回答
0

对于多选，您必须编写 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

于 2019-09-04T14:13:53.020 回答
0

我编辑了select2.min.js文件以将select-2__search生成的输入字段设置为readonly="true".

于 2017-04-26T00:14:03.633 回答
0

@Misha Kobrin 的回答对我很有效所以我决定再解释一下

您想隐藏搜索框，您可以通过 jQuery 来实现。

例如，您在具有 id 受众的下拉列表中初始化了 select2 插件

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

该示例适用于 select2 工作的所有设备。

于 2015-12-10T12:39:15.120 回答
0

以防万一有人偶然发现，构造函数中现在有一个 hideSearch 选项，它似乎更接近问题所要寻找的内容。

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

于 2022-01-26T14:02:03.800 回答
0

试试这个 CSS

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

此输入是搜索字段

于 2020-06-25T07:03:55.903 回答
0

您可以设置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
});
于 2021-11-20T10:04:36.467 回答