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/

Just a shot in the dark: did you try setting `data-filter=false`? — matsr, Apr 06 '12 at 19:35
The gunnarsson's answer its the good way: http://stackoverflow.com/a/13128429/1413049 — Capy, Nov 10 '12 at 18:52

score 65 · Answer 1 · answered Oct 29 '12 at 19:38

65

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.

answered Oct 29 '12 at 19:38

Munneson

892
1
6
3

2

How would one learn these about attributes and properties? There's no documentation AFAIK, only the presentation on github which is too lightweight and does not cover anything. – Daniel Apr 11 '13 at 09:17

score 46 · Answer 2 · answered Apr 10 '12 at 17:27

46

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

answered Apr 10 '12 at 17:27

Maxime Lafontaine

469
3
2

1

What about ajax-chosen, can I pass the same parameter here? – Borut Tomazin May 24 '12 at 15:32

score 11 · Accepted Answer · answered Apr 06 '12 at 20:04

11

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

answered Apr 06 '12 at 20:04

Dhiraj

33,140
10
61
78

Not bad. Although probably not the best method, that works. Not sure why I didn't think of doing that earlier. Thanks! :) – bob_cobb Apr 06 '12 at 20:11
4

you can also just use .chzn-search {display:none;} in your css. however using disable_search:true within your constructor object is the correct way. – Roi Jun 05 '13 at 23:00

score 5 · Answer 4 · edited Oct 06 '12 at 06:55

5

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

edited Oct 06 '12 at 06:55

Littm

4,923
4
30
38

answered Sep 12 '12 at 15:05

Jef Furlong

51
1
1

Just FYI: Doing this removes the ability to TAB into the Chosen dropdown. I originally tried this but once I couldn't TAB into it (strict accessibility guidelines) I had to go with the `disable_search` option. – Simon Whitehead Apr 03 '13 at 23:25

score 3 · Answer 5 · answered Oct 06 '15 at 10:15

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!

score 2 · Answer 6 · answered Jul 05 '13 at 05:46

2

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}

answered Jul 05 '13 at 05:46

GwenM

1,198
10
24

score 2 · Answer 7 · answered Sep 19 '13 at 12:10

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

score 2 · Answer 8 · answered Jul 15 '14 at 21:39

2

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

answered Jul 15 '14 at 21:39

sami

79
1
6

2

Hi, and welcome to stack overflow! This code may well solve the problem - but it's always considered Good Form to give some explanation of the code you gave. You should know - there are lots of newbies that come to Stack Overflow, googling for a solution to their problems too, and they can learn a thing or two from your expertise... but only if you explain things. Don't forget that what may be really obvious to you, may not be to a total newbie :) – Taryn East Jul 15 '14 at 23:13

score 1 · Answer 9 · answered Mar 19 '14 at 11:28

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.

score 0 · Answer 10 · answered Aug 28 '13 at 10:30

0

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

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

answered Aug 28 '13 at 10:30

Darin Kolev

3,401
13
31
46

pedrolopes10 · Answer 11 · 2013-11-20T10:41:32.077

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.

score 0 · Answer 12 · answered Jan 07 '14 at 10:08

0

disable_search:true,

Here is the document for chosen jquery plugin

answered Jan 07 '14 at 10:08

Fury

4,643
5
50
80

jQuery Chosen plugin without search field

12 Answers12

Linked