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 jQuery chosen plugin (used to style select inputs). Specifically I'd like to use the standard select one without it.

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

Answer 1

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

Answer 2

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 3

$(".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 4

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 5

Newer versions of jquery chosen gives you option to disable search input with in dropdown.

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

Older versions do not support this option. Some how if you are strictly not allowed to use newer version than you can use

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

it will hide the search box if results are less than 5, best to use with gender type dropdowns. There is another way to fix this and that is;

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

Call hide immediately after initialization, don't know why this tricks works but it is doing what you want!

I suggest you to use the latest version so you have access to latest options.

Hope it works for you!

Answer 6

Use this code to disable it:

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

and don't forget to hide it, otherwise it will still be working on mobile !

.chzn-search{display: none}

Answer 7

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 8

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

Answer 9

Since none of the chosen-settings for hiding the search-field for multiple selects seemed to be working, I hacked the chosen.jquery.js in line 577 to:

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

(Span instead of the input field). Needed to comment out this line, too

this.search_field[0].disabled = false;

Working fine for me - even though its not the best practice to hack the code.

Answer 10

With the latest Version of chosen only that works for me:

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

Answer 11

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 12

disable_search:true,

Here is the document for chosen jquery plugin