select2 - 隐藏搜索框答案

【问题标题】：select2 - hiding the search boxselect2 - 隐藏搜索框
【发布时间】：2013-07-03 00:50:12
【问题描述】：

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

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

【问题讨论】：

感谢您的想法。虽然我知道 jQuery 中的 .show() 和 .hide() ，但我没有想到如果我在它自己的选项之外做类似的事情，插件会继续工作。尽管如此，乍一看，它似乎有效:)
你能解释一下 hide 方法的作用和工作原理吗？你是在告诉我它只是隐藏了搜索框，因为这似乎根本不是这样
@IcedDante hide 方法在这里描述：api.jquery.com/hide 只要你只将它应用到适当的选择器上，是的，它应该单独隐藏搜索框。不过，可以使用特定于插件的方法来隐藏它，我建议您改用它（见下文）。

【解决方案1】：

看到这个帖子https://github.com/ivaynberg/select2/issues/489，你可以通过将 minimumResultsForSearch 设置为负值来隐藏搜索框。

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

【讨论】：

github 上的票中提到的主要问题是在移动设备上它仍然显示键盘。我们已将 select2 替换为 selected。
它完美地转换为 angular-ui ui-select2 ！
非常方便的选择！我用它来显示搜索 10 多个选项。无需手动删除搜索输入。
@KevinBrown Infinity 不是负值。您的编辑使文本和代码不匹配。链接到的问题特别指出负值是正确支持的方法。链接到的问题还声称“minimumResultsForSearch 的高值仅在打开的选择中隐藏搜索框。但是如果我们在选择关闭并聚焦时键入一些字母 - 无论多高，搜索都会弹出”，尽管我无法重现该特定问题在当前版本中，在旧版本中很可能是一个真正的问题。由于这些原因，我回滚了您的编辑。
但是，它完全禁用了搜索功能。

【解决方案2】：

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

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

【讨论】：

我觉得-1比Infinity好

【解决方案3】：

.no-搜索 .select2-搜索 { 显示：无 } $("#test").select2({ dropdownCssClass：'无搜索' });

【讨论】：

+1 我喜欢这样，因为它可以防止搜索框在发出 AJAX 请求时短暂出现在 UI 中。这也适用于 -1 hack。
这绝对是该问题的最佳答案，因为它确实阻止了诸如“搜索....”之类的事件 ui。
完美运行，谢谢！请注意任何未来的 Google 员工，这需要 select2 完整版 (select2.full.*)，如下所述：github.com/select2/select2/issues/2879#issuecomment-149940634
谢谢，这就是我一直在寻找的，因为即使隐藏了搜索框，它也允许在您希望以编程方式调用它时保持搜索功能可用：$("#myselect").select2("search" "搜索值")
确实这是最好的选择。正如@Othyn 所说，需要完整版本 select2.full.min.js，如网站上所述：select2.github.io

【解决方案4】：

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>

【讨论】：

【解决方案5】：

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

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

【讨论】：

完美，手机键盘不显示！
这适用于页面上的所有下拉菜单，但我不能只针对特定的下拉菜单。无法定位，因为它们不是 select2 id 的子代。
添加一个包装器来指定

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

这是最好的解决方案，干净又好用：

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

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

【讨论】：

这在过去可能运行良好，但不适用于最新版本的 select2。

【解决方案8】：

你可以试试这个

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

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

您可以在这里查看 select2 文档select2 documents

【讨论】：

【解决方案9】：

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

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

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

【讨论】：

【解决方案10】：

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

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

【讨论】：

【解决方案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);

【讨论】：

【解决方案12】：

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

【讨论】：

【解决方案13】：

如果您的选择中有多个属性，那么这个肮脏的技巧可以工作：

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

【讨论】：

【解决方案14】：

如果您想在初始打开时隐藏并通过 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();
  }

【讨论】：

【解决方案15】：

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

你想隐藏搜索框你可以通过jQuery做到。

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

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

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

【讨论】：

【解决方案16】：

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

【讨论】：

【解决方案17】：

多选需要写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

【讨论】：

【解决方案18】：

试试这个 CSS

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

这个输入是搜索字段

【讨论】：

【解决方案19】：

您可以为minimumResultsForSearch 选项设置infinity 或-1

解决方案 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
});

【讨论】：

【解决方案20】：

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

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

【讨论】：