如何从选择的 JS 中删除搜索框？答案

【问题标题】：How to remove search box from Chosen JS?如何从选择的 JS 中删除搜索框？
【发布时间】：2012-08-23 02:01:53
【问题描述】：

在 github 上，它说搜索框现在在选定的选择框中是可选的。有人知道怎么去掉吗？

【问题讨论】：

【解决方案1】：

Chosen的当前版本提供了两种方法来控制搜索框的显示。两者都在初始化期间作为选项传入。要完全隐藏搜索框，请传入选项"disable_search": true：

$("#mySelect").chosen({
  "disable_search": true
});

或者，如果您想在存在一定数量的选项时显示搜索，请使用选项"disable_search_threshold": numberOfOptions（其中numberOfOptions 是显示搜索框之前所需的最少选项数）：

$("#mySelect").chosen({
  "disable_search_threshold": 4
});

jQuery(function($) {
  // Create a set of OPTION elements from some dummy data
  var words = ["lorem", "ipsum", "dolor", "sit", "amet,", "consectetur", "adipiscing", "elit", "duis", "ullamcorper", "diam", "sed", "lorem", "mattis", "tristique", "integer", "pharetra", "sed", "tortor"],
      options = $($.map(words, function(word) {
        return $(document.createElement('option')).text(word)[0];
      }));
  $('select').each(function() {
    // Add the dummy OPTIONs to the SELECT
    var select = $(this).append(options.clone());
    // Initialize Chosen, using the options from the
    // `data-chosen-options` attribute
    select.chosen(select.data('chosen-options'));
  });
});

body {
  font-family: sans-serif;
  font-size: .8em; }
label {
  display: block;
  margin-bottom: 1.4em; }
  label .label {
    font-weight: bold;
    margin-bottom: .2em; }
select {
  width: 14em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.jquery.min.js"></script>

<label>
  <div class='label'>Default behavior</div>
  <select name='default' data-chosen-options='{}'></select>
</label>
<label>
  <div class='label'>No search at all</div>
  <select name='no-search' data-chosen-options='{ "disable_search": true }'></select>
</label>
<label>
  <div class='label'>Search iff more than 4 items</div>
  <select name='conditional-search' data-chosen-options='{ "disable_search_threshold": 4 }'></select>
</label>
<label>
  <div class='label'>Search iff more than 32 items</div>
  <select name='conditional-search' data-chosen-options='{ "disable_search_threshold": 32 }'></select>
</label>

【讨论】：

我下载了新版本，它可以与 disable_search 一起使用：现在是真的，谢谢
你知道哪里有官方参考吗？
不再起作用了，文档中没有提到它
我添加了一个代码示例，展示了这两个选项的工作原理。这两个选项现在都记录在Chosen options 页面上。仅供参考，我建议您也查看Select2。这两个库现在似乎都得到了很好的维护和记录，所以这是一个偏好问题，哪个库更好地满足您的项目要求:-)

【解决方案2】：

在需要的时候隐藏它

$('.chzn-search').hide();

【讨论】：

【解决方案3】：

chosen.jquery.js 只是将搜索框display:none的样式设置在div中，类为chzn-search

<div class="chzn-search"><input type="text" autocomplete="off" style="display:none;" /></div>

【讨论】：

我不想永久删除它。仅来自某些页面上的某些选择框。例如，如果我有一个长选择框，我喜欢搜索框，但对于小的选择框，我宁愿删除它。
此 HTML 由 Javascript 生成，答案提供静态 HTML。修改生成的 HTML 需要额外的 Javascript。
这不一定是真的。我这样做并且效果很好：<div class="no-search"><select class="chosen"></select></div> 和 $('.chosen').chosen(); 与 css .no-search .chzn-search { display: none; }