jQuery Chosen plugin without search field

Question

Not sure if this has been covered somewhere, but I couldn\'t find it in the documentation, and was wondering if it\'d be possible to not include the search input box with the jQ

Answer 1

I add a class to my stylesheet.

.chzn-select { display: none }

Alternatively, for individual elements, I specify the element and append _chzn to target it.

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

Note that: chosen will convert hyphens in your element ids and classes to underscores, so to target element-id you need.

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

Answer 2

The disable_search_threshold option hides the search box for single select dropdowns. The number passed in specifies how many items you want to allow before showing the search box. If you don't want the searchbox, just set it to a higher number than the amount of items it will ever contain.

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

Answer 3

Just a quick follow-up: I noticed that in function

AbstractChosen.prototype.set_default_values

a variable is read from

this.options.disable_search

So you can disable the search-field with

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

without using a fixed-number threshold.

Answer 4

I used jQuery('select').chosen( {disable_search: true} ); but on chrome profiler, the method search_field_scale was called anyway and eat a lot of the performance.

So I remove the method and all the calls to him and replaced with this.search_field.css({'width': '100%'}) on show_search_field_default and replace style=25px with style:100% and than this.search_field.css({ 'width': '23px' }); result_select because of the "data-placeholder"

working fine for me.

Answer 5

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

If the number of element of the select is smaller than disable_search_threshold (here 2 and less), the search box will not display.

Answer 6

Well I tried with the documentation as well and no luck, so I finally fixed to this

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

I do the above after I call chosen. Hope this helps