首页 文章

select2 - 隐藏搜索框

提问于
浏览 次
166

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

当然，我可以使用常规的html选择，但为了保持一致性，我想尽可能使用Select2 .

jquery jquery-select2

14 回答

  • 3

    这是最好的解决方案，清洁和工作良好：

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

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

    回复于
  • 0

    如果select是show results，则必须使用：

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

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

    回复于
  • 1

    查看此主题https://github.com/ivaynberg/select2/issues/489，您可以通过将minimumResultsForSearch设置为负值来隐藏搜索框 .

    $('select').select2({
    minimumResultsForSearch: -1
});
    回复于
  • 1

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

    $(".select2-search, .select2-focusser").remove();
    回复于
  • 1
    .no-search .select2-search {
    display:none
}

$("#test").select2({
    dropdownCssClass : 'no-search'
});
    回复于
  • 391

    它位于他们的示例页面上：https://select2.github.io/examples.html#hide-search

    $(".js-example-basic-hide-search").select2({
  minimumResultsForSearch: Infinity
});
    回复于
  • 1

    @Misha Kobrin的答案对我很有帮助因此我决定更多地解释它

    你想隐藏你可以通过jQuery做的搜索框 .

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

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

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

    回复于
  • 0

    Version 4.0.3

    尽量不要将用户界面要求与JavaScript代码混合在一起 .

    您可以使用以下属性隐藏标记中的搜索框：

    data-minimum-results-for-search="Infinity"

    Markup

    <select class="select2" data-minimum-results-for-search="Infinity"></select>

    Example

    $(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>
    回复于
  • 0

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

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

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

    回复于
  • 28
    //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);
    回复于
  • 18
    //readonly on all select2 input
$(".select2-search input").prop("readonly", true);
    回复于
  • 24

    如果要在初始打开时隐藏并通过ajax调用填充下拉列表，请将以下内容添加到select2声明中的ajax块：

    beforeSend: function () 
  {
    $('.select2-search--dropdown').addClass('hidden');
  }
    回复于
  • 3

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

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

相关问题