Javascript 没有搜索字段的 jQuery 选择插件
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/10048289/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Chosen plugin without search field
提问by bob_cobb
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.
不确定这是否已在某处涵盖,但我在文档中找不到它,并且想知道是否可以不将搜索输入框与 jQuery 选择的插件(用于样式选择输入)一起包含在内。具体来说,我想使用没有它的标准选择。
采纳答案by Dhiraj
Well I tried with the documentation as well and no luck, so I finally fixed to this
好吧,我也尝试了文档,但没有运气,所以我终于解决了这个问题
$('.chzn-search').hide();
$('.chzn-search').hide();
I do the above after I call chosen. Hope this helps
我在打电话给 selected 后执行上述操作。希望这可以帮助
回答by Munneson
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.
不使用固定数量的阈值。
回答by Maxime Lafontaine
$(".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.
如果 select 的元素数量小于 disable_search_threshold(此处为 2 及更少),则不会显示搜索框。
回答by Jef Furlong
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.
或者,对于单个元素,我指定元素并附_chzn
加到它的目标。
#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.
请注意:selected 会将元素 id 和类中的连字符转换为下划线,以便针对element-id
您需要的目标。
#element_id_chzn .chzn-select { display: none; }
回答by Adnan
Newer versions of jquery chosen gives you option to disable search input with in dropdown.
选择的较新版本的 jquery 为您提供了禁用搜索输入的选项。
$(".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;
如果结果少于 5,它将隐藏搜索框,最好与性别类型下拉列表一起使用。还有另一种方法可以解决这个问题,那就是;
$(".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!
希望这对你有用!
回答by sami
$('select').chosen( {disable_search: true} );
回答by GwenM
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}
回答by fotijr
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.
该disable_search_threshold
选项隐藏了单选下拉列表的搜索框。传入的数字指定在显示搜索框之前要允许的项目数。如果您不想要搜索框,只需将其设置为比它将包含的项目数量更高的数字。
$('#myDropDown').chosen({ disable_search_threshold: 10 });
回答by Arerrac
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:
由于用于隐藏多个选择的搜索字段的任何选择设置似乎都不起作用,我将第 577 行中的 selected.jquery.js 修改为:
<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.
对我来说工作正常 - 即使它不是破解代码的最佳实践。
回答by pedrolopes10
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.
我使用了 jQuery('select').chosen( {disable_search: true} ); 但是在 chrome profiler 上,无论如何都会调用 search_field_scale 方法并消耗很多性能。
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"
因此,我删除了该方法和对他的所有调用,并在 show_search_field_default 上用 this.search_field.css({'width': '100%'}) 替换并将 style=25px 替换为 style:100% 而不是 this.search_field.css ({'宽度':'23px'}); result_select 因为“数据占位符”
working fine for me.
对我来说工作正常。