web-dev-qa-db-fra.com

select2 - masquer le champ de recherche

Pour mes sélections les plus significatives, la zone de recherche dans Select2 est magnifique. Cependant, dans un cas, j'ai un simple choix de 4 choix codés en dur. Dans ce cas, le champ de recherche est superflu et semble un peu ridicule. Est-il possible de le cacher d'une manière ou d'une autre? J'ai parcouru la documentation en ligne et je n'ai trouvé aucune option pour cela dans le constructeur.

Je pourrais bien sûr utiliser un code HTML normal, mais par souci de cohérence, j'aimerais utiliser Select2 si possible.

jqueryjquery-select2
172
EleventyOne

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

$('select').select2({
    minimumResultsForSearch: -1
});
404
Blue Smith
. no-search .select2-search {
 display: none 
} 

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

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

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

Version 4.0.3

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

Vous pouvez masquer le champ de recherche dans le balisage avec l'attribut suivant: 

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

Balisage 

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

22
Aaron Hudon

Supprimer les entrées avec jQuery fonctionne pour moi:

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

Si vous souhaitez masquer la recherche d'un menu déroulant spécifique, utilisez l'attribut id pour cela.

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

C'est la meilleure solution, propre et efficace:

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

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

3
YWA

Si vous avez un multi-attribut dans votre sélection, ce "hack" 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 docs ici https://select2.org/searching#limiting-display-of-the-search-box-tolarge-result-sets

1
ivanbogomolov
//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);
1
Juan Manuel De Castro

Si le résultat est select, il faut utiliser ceci:

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

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

1
MKK
//readonly on all select2 input
$(".select2-search input").prop("readonly", true);
1
Juan Manuel De Castro

J'aime faire cela 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 });
1
Mike Campbell

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

Vous voulez masquer le champ de recherche, vous pouvez le faire avec jQuery.

par exemple, vous avez initialisé le plugin select2 sur un menu déroulant ayant un public cible 

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

L'exemple fonctionne sur tous les périphériques sur lesquels select2 fonctionne.

0
Shahbaz

J'ai modifié le fichier select2.min.js pour définir le champ de saisie select-2__search généré à readonly="true".

0
capcom

Tu peux essayer ça

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

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

Vous pouvez vérifier ici dans select2 document select2 documents

0
Foram Thakral

Si vous voulez masquer lors de l'ouverture initiale et que vous remplissez le menu déroulant via un appel ajax, ajoutez ce qui suit au bloc ajax dans votre déclaration select2:

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