select2 - masquage du champ de recherche


206

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.


Merci pour l'idée. Bien que je connaissais .show () et .hide () dans jQuery, il ne m'est pas venu à l'esprit que le plug-in continuerait à fonctionner si je faisais quelque chose comme ça en dehors de ses propres options. Néanmoins, à première vue, cela semble fonctionner :)
EleventyOne

Pouvez-vous expliquer ce que fait la méthode hide et comment elle fonctionne? Êtes-vous en train de me dire que cela ne fait que masquer la boîte de recherche parce que cela ne semble pas du tout être le cas
IcedDante

@IcedDante La hideméthode est décrite ici: api.jquery.com/hide Tant que vous ne l'appliquez qu'au sélecteur approprié, oui, elle doit masquer la zone de recherche seule. Néanmoins, il existe des méthodes spécifiques au plugin qui peuvent être utilisées pour le masquer, que je vous recommande d'utiliser à la place (voir ci-dessous).
EleventyOne

Réponses:


474

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

14
Le problème principal ici, comme mentionné dans le ticket sur github, est sur mobile, il affiche toujours le clavier. Nous avons remplacé select2 par selected.
toutpt

2
et il se traduit parfaitement en angular-ui ui-select2!
rhigdon

Option très pratique! Je l'ai utilisé pour afficher la recherche de 10 options et plus. Pas besoin de supprimer manuellement l'entrée de recherche.
blazkovicz

@KevinBrown Infinityn'est pas une valeur négative. Votre modification fait que le texte et le code ne correspondent pas. Le problème lié à indique spécifiquement qu'une valeur négative est la bonne approche prise en charge. Le problème lié à affirme également "La valeur élevée de minimumResultsForSearch masque uniquement la boîte de recherche dans la sélection ouverte. Mais si nous tapons une lettre pendant que la sélection est fermée et ciblée - la recherche apparaîtra, quelle que soit la hauteur" et bien que je ne puisse pas reproduire ce problème particulier dans la version actuelle, il est probable que ce soit un vrai problème dans les anciennes versions. Pour ces raisons, j'ai annulé votre modification.

1
Mais, il désactive complètement la fonctionnalité de recherche.
sudip


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

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

1
+1 J'aime ceci car il empêche la boîte de recherche d'apparaître brièvement dans l'interface utilisateur pendant qu'une demande AJAX est faite. cela est également vrai pour le hack -1.
SimonGates

C'est définitivement la meilleure réponse à la question car elle empêche vraiment les événements ui tels que "recherche ....".
Sarin Suriyakoon

5
A parfaitement fonctionné, merci! Juste une note pour tout futur Googler, cela nécessite la version complète select2 (select2.full. *), Comme indiqué ici: github.com/select2/select2/issues/2879#issuecomment-149940634
Othyn

1
Merci, c'est ce que je cherchais car même avec la zone de recherche cachée, cela permet de garder la fonctionnalité de recherche disponible lorsque vous souhaitez l'appeler par programme: $ ("# myselect"). Select2 ("search", "search_value")
nicolas

En effet, c'est la meilleure option. Comme @Othyn le dit, la version complète est nécessaire select2.full.min.js comme documenté sur le site web: select2.github.io
robbpriestley

26

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>


20

Supprimer les entrées avec jQuery fonctionne pour moi:

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

Parfait, sur mobile le clavier n'est pas affiché!
Pieter Meiresone

Cela fonctionne pour toutes les listes déroulantes de la page, mais je ne peux pas cibler uniquement des listes déroulantes spécifiques. Ne peut pas être ciblé car ils ne sont pas des enfants de l'ID select2.
Shaun Lebron

2
ajouter un wrapper pour spécifier
YAMM

3

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


Cela a peut-être bien fonctionné dans le passé, mais ne fonctionne pas sur la dernière version de select2.
Matt Browne

3

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

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

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


1

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

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



1

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

1

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


0

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.


0

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


0

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


0

essayez ce CSS

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

cette entrée est le champ de recherche

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.