22

github では、選択した選択ボックスで検索ボックスがオプションになったと言われています。誰かがそれを削除する方法を知っていますか?

4

3 に答える 3

49

Chosenの現在のバージョンでは、検索ボックスの表示を制御する 2 つの方法が提供されています。どちらも初期化中にオプションとして渡されます。検索ボックスを完全に非表示にするには、次のオプションを指定します"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>

于 2012-10-03T01:42:41.990 に答える
3

必要なときに非表示にするだけです

$('.chzn-search').hide();
于 2012-09-03T15:59:57.643 に答える
0

display:noneselected.jquery.jsはクラスでdivの検索ボックスのスタイルを設定するだけですchzn-search

<div class="chzn-search"><input type="text" autocomplete="off" style="display:none;" /></div>
于 2012-08-30T05:30:23.197 に答える