Question

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

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

Answer 1

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

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

Answer 2

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

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

Answer 3

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

String key = "A_B_C_D";       // => [A, B, C, D]
//String key = "A_B_C_D_E_F"; // => [A_B, C, D, E, F]
String[] res = null;
if (key.split("_").length > 4) {
    res = key.split("(?<!^[^_]*)_");
} else {
    res = key.split("_");
}
System.out.println(Arrays.toString(res));

Answer 4

版本4.0.3

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

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

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

<强>标记

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

示例

＆＃13;
＆＃13;
$(document).ready(function() { $(".select2").select2(); });
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 5

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

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

Answer 6

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

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

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

Answer 7

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

...
return admin.database().ref('/fcmToken/' + userUid).once('value', snapshot => {
        const values = snapshot.val()
        const fcmToken = values.fcmToken

        var message = {
            notification: {
                body: 'New message(s)',
                sound: 'default'
            },

              token: fcmToken
            };

        return admin.messaging().send(message)
          .then((response) => {
            return console.log('Successfully sent message:', response);
          })
          .catch((error) => {
            return console.log('Error sending message:', error);
          });
    })

Answer 8

//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 9

如果您在选择中具有多重属性，则此肮脏的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

Answer 10

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

Answer 11

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

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

Answer 12

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

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

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

Answer 13

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

Answer 14

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

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

Answer 15

@Misha Kobrin的答案对我来说很有效所以我决定更多解释

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

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

OpenChatsTableViewController

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

Answer 16

您可以尝试

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

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

您可以在select2文档select2 documents

中查看

Answer 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

Answer 18

尝试此CSS

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

此输入为搜索字段

select2 - 隐藏搜索框

18 个答案: