web-dev-qa-db-fra.com

plugin jQuery Chosen sans champ de recherche

Pas sûr que cela ait été couvert quelque part, mais je ne pouvais pas le trouver dans la documentation et je me demandais s'il serait possible de ne pas inclure le champ de saisie de recherche avec le plugin choisi par jQuery (utilisé pour styler les entrées sélectionnées). Plus précisément, j'aimerais utiliser la norme en sélectionnant une sans celle-ci.

http://harvesthq.github.com/chosen/

javascriptjqueryjquery-pluginsjquery-chosen
30
bob_cobb

Et bien j’ai essayé avec la documentation aussi et pas de chance, alors j’ai finalement résolu ça

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

Je fais ce qui précède après avoir appelé choisi . J'espère que cela aide

11
Dhiraj

Juste un suivi rapide: j'ai remarqué que dans la fonction 

AbstractChosen.prototype.set_default_values

une variable est lue à partir de

this.options.disable_search

Vous pouvez donc désactiver le champ de recherche avec

jQuery('select').chosen( {disable_search: true} );

sans utiliser un seuil de nombre fixe.

62
gunnarsson
$(".chzn-select").chosen({disable_search_threshold: 3});

Si le nombre d'éléments de la sélection est inférieur à disable_search_threshold (ici 2 et moins), le champ de recherche ne s'affichera pas.

43
Maxime Lafontaine

J'ajoute une classe à ma feuille de style.

.chzn-select { display: none }

Alternativement, pour les éléments individuels, je spécifie l'élément et ajoute _chzn pour le cibler.

#element_chzn .chzn-select { display: none; }

Notez que: selected convertira les traits d'union dans vos identifiants d'élément et vos classes en traits de soulignement, afin de cibler element-id dont vous avez besoin.

#element_id_chzn .chzn-select { display: none; }
5
Jef Furlong

Les nouvelles versions de jquery choisies vous offrent la possibilité de désactiver les entrées de recherche dans la liste déroulante.

$(".chzn-select").chosen({
   disable_search: true
});

Les anciennes versions ne supportent pas cette option. Certains comment si si vous n'êtes strictement pas autorisé à utiliser une version plus récente que vous pouvez utiliser

$(".chzn-select").chosen({
   disable_search_threshold: 5
});

si les résultats sont inférieurs à 5, le champ de recherche sera masqué. Il est préférable de l'utiliser avec des listes déroulantes par sexe. Il existe un autre moyen de résoudre ce problème:

$(".chzn-select").chosen();
$(".chzn-select").hide();

Appelez masquer immédiatement après l'initialisation, vous ne savez pas pourquoi cette astuce fonctionne, mais elle fait ce que vous voulez!

Je vous suggère d'utiliser la dernière version pour avoir accès aux dernières options.

J'espère que ça marche pour toi!

3
Adnan

Utilisez ce code pour le désactiver:

jQuery('select').chosen( {disable_search: true} );

et n'oubliez pas de le cacher, sinon il fonctionnera toujours sur mobile!

.chzn-search{display: none}
2
GwenM
$('select').chosen( {disable_search: true} );
2
sami

L'option disable_search_threshold masque la zone de recherche pour les listes déroulantes à sélection unique. Le nombre transmis indique le nombre d'éléments que vous souhaitez autoriser avant d'afficher le champ de recherche. Si vous ne souhaitez pas que le champ de recherche soit défini, définissez-le simplement sur un nombre supérieur au nombre d'éléments qu'il contiendra.

$('#myDropDown').chosen({ disable_search_threshold: 10 });
2
fotijr

Puisqu'aucun des paramètres choisis pour masquer le champ de recherche pour plusieurs sélections ne semblait fonctionner, j'ai piraté le fichier selected.jquery.js de la ligne 577 pour:

<li class="search-field"><span class="placeholder">' + this.default_text + '</span></li>

(Span au lieu du champ de saisie). J'avais besoin de commenter cette ligne aussi

this.search_field[0].disabled = false;

Cela fonctionne bien pour moi - même si ce n’est pas la meilleure pratique pour pirater le code.

1
Arerrac

J'ai utilisé jQuery ('select'). Choisi ({disable_search: true}); mais sur Chrome profiler, la méthode search_field_scale a quand même été appelée et consomme beaucoup de performance.

Je supprime donc la méthode et tous ses appels et le remplace par this.search_field.css ({'width': '100%'}) sur show_search_field_default et remplace style = 25px par style: 100% .__ et que this.search_field.css ({'width': '23px'}); result_select en raison de "l'espace réservé aux données"

fonctionne bien pour moi.

0
pedrolopes10
disable_search:true,

Voici le document pour le plugin jquery choisi

0
Fury

Avec la dernière version choisie seulement qui fonctionne pour moi:

$('ul.chosen-choices li.search-field').hide();
0
Darin Kolev