select2 - masquage du champ de recherche

Pour mes sélections les plus importantes, la zone de recherche de Select2 est merveilleuse. Cependant, dans un cas, j'ai une simple sélection de 4 choix codés en dur. Dans ce cas, la zone de recherche est superflue et semble un peu idiote d'être présente. Est-il possible de le cacher d'une manière ou d'une autre? J'ai jeté un œil à la documentation en ligne et je n'ai trouvé aucune option pour cela dans le constructeur.

Je pourrais, bien sûr, simplement utiliser une sélection html régulière, mais pour des raisons de cohérence, j'aimerais utiliser Select2 si possible.

Voir ce fil https://github.com/ivaynberg/select2/issues/489 , vous pouvez masquer la zone de recherche en définissant minimumResultsForSearch sur une valeur négative.

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

C'est sur leur page d'exemples: https://select2.org/searching#hiding-the-search-box

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

.no-search .select2-search {
    affichage: aucun
}

$ ("# test"). select2 ({
    dropdownCssClass: «pas de recherche»
}); 

Version 4.0.3

Essayez de ne pas mélanger les exigences de l'interface utilisateur avec votre code JavaScript.

Vous pouvez masquer la zone de recherche dans le balisage avec l'attribut:

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

Marquage

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

Exemple

$(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>

Supprimer les entrées avec jQuery fonctionne pour moi:

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

C'est la meilleure solution, propre et fonctionne bien:

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

Ensuite, créez une classe .hidden { display;none; }

Si vous souhaitez masquer la recherche d'une liste déroulante spécifique, utilisez l'attribut id pour cela.

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

Si la sélection est afficher les résultats, il faut utiliser ceci:

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

il ferme la boîte de résultats de recherche, puis rend le contrôle invisible

J'aime le faire dynamiquement en fonction du nombre d'options dans la sélection; pour masquer la recherche de sélections avec 10 résultats ou moins, je fais:

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

//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);

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

Si vous avez plusieurs attributs dans votre sélection, ce hack sale fonctionne:

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();
});

voir les documents ici https://select2.org/searching#limiting-display-of-the-search-box-to-large-result-sets

Si vous souhaitez masquer lors de l'ouverture initiale et que vous remplissez la liste déroulante via l'appel ajax, ajoutez ce qui suit au bloc ajax dans votre déclaration select2:

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

Pour ensuite l'afficher à nouveau (et vous concentrer) une fois votre demande ajax réussie:

  success: function() {
      $('.select2-search--dropdown').removeClass('select2-search--hide'); // show search bar then focus
      $('.select2-search__field')[0].focus();
  }

Vous pouvez essayer ceci

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

il ferme la boîte de résultats de recherche, puis rend le contrôle invisible

Vous pouvez vérifier ici dans select2 document select2 documents

La réponse de @Misha Kobrin fonctionne bien pour moi J'ai donc décidé de l'expliquer davantage

Vous souhaitez masquer la boîte de recherche, vous pouvez le faire par jQuery.

par exemple, vous avez initialisé le plugin select2 sur une liste déroulante ayant un public id

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

L'exemple fonctionne sur tous les appareils sur lesquels select2 fonctionne.

J'ai modifié le select2.min.jsfichier pour définir le select-2__searchchamp d'entrée qui est généré readonly="true".

Pour la multisélection, vous devez écrire du code js, il n'y a pas de propriété settings.

$('#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);
});

Ceci mentionné sur leur page: https://select2.org/searching#multi-select

essayez ce CSS

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

cette entrée est le champ de recherche