没有搜索字段的jQuery选择插件

Posted 2023-05-07

【中文标题】没有搜索字段的jQuery选择插件

【英文标题】：jQuery Chosen plugin without search field

【发布时间】：2012-04-20 08:31:22

【问题描述】：

不确定这是否已经在某处被覆盖，但我在文档中找不到它，并且想知道是否可以不包含 jQuery 选择插件的搜索输入框（用于样式选择输入）。具体来说，我想使用没有它的标准选择一个。

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

【问题讨论】：

只是在黑暗中拍摄：您是否尝试设置data-filter=false？

@matsr 刚刚尝试过.. 不幸的是，这不起作用：\

好吧，那我不知道。对不起！祝你好运。

gunnarsson 的回答是好方法：***.com/a/13128429/1413049

【参考方案1】：

只是一个快速的跟进：我注意到在函数中

AbstractChosen.prototype.set_default_values

从变量中读取

this.options.disable_search

所以你可以禁用搜索字段

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

不使用固定数量的阈值。

【讨论】：

如何学习这些关于属性和属性的知识？没有文档 AFAIK，只有 github 上的演示文稿太轻量级并且没有涵盖任何内容。

【参考方案2】：

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

如果select的元素个数小于disable_search_threshold（这里是2以下），搜索框不会显示。

【讨论】：

ajax-chosen怎么样，我可以在这里传递相同的参数吗？

【参考方案3】：

好吧，我也尝试了文档，但没有运气，所以我终于解决了这个问题

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

我在调用选择后执行上述操作。 希望这会有所帮助

【讨论】：

不错。虽然可能不是最好的方法，但它确实有效。不知道为什么我没有早点想到这样做。谢谢！ :)

你也可以在你的 CSS 中使用 .chzn-search display:none;。但是在构造函数对象中使用 disable_search:true 是正确的方法。

【参考方案4】：

我在样式表中添加了一个类。

.chzn-select  display: none 

或者，对于单个元素，我指定元素并附加 _chzn 以定位它。

#element_chzn .chzn-select  display: none; 

请注意： 选择会将元素 ID 和类中的连字符转换为下划线，因此您需要定位 element-id。

#element_id_chzn .chzn-select  display: none; 

【讨论】：

仅供参考：这样做会删除选项卡进入选择下拉列表的能力。我最初尝试过这个，但是一旦我无法进入它（严格的可访问性指南），我不得不使用 disable_search 选项。

【参考方案5】：

选择的较新版本的 jquery 为您提供了使用下拉菜单禁用搜索输入的选项。

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

旧版本不支持此选项。如果严格不允许您使用比您可以使用的新版本，一些方法

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

如果结果少于 5 个，它将隐藏搜索框，最好与性别类型下拉菜单一起使用。还有另一种方法可以解决这个问题，那就是；

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

初始化后立即调用 hide，不知道为什么这个技巧有效，但它正在做你想做的事！

我建议您使用最新版本，以便您可以使用最新选项。

希望它对你有用！

【参考方案6】：

使用此代码禁用它：

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

别忘了隐藏它，否则它仍然可以在移动设备上运行！

.chzn-searchdisplay: none

【参考方案7】：

disable_search_threshold 选项隐藏单选下拉菜单的搜索框。传入的数字指定在显示搜索框之前要允许的项目数。如果您不想要搜索框，只需将其设置为高于其将包含的项目数量的数字即可。

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

【参考方案8】：

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

【讨论】：

嗨，欢迎来到堆栈溢出！这段代码可能很好地解决了这个问题——但它总是被认为是对你给出的代码进行一些解释的好形式。你应该知道 - 有很多新手来到 Stack Overflow，也在谷歌上寻找解决他们问题的方法，他们可以从你的专业知识中学到一两件事......但前提是你解释了一些事情。不要忘记，对你来说可能很明显的东西，对于一个新手来说可能不是:)

【参考方案9】：

由于隐藏多个选择的搜索字段的选择设置似乎都不起作用，我将第 577 行中的 selected.jquery.js 破解为：

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

（跨度而不是输入字段）。也需要注释掉这一行

this.search_field[0].disabled = false;

对我来说工作得很好——尽管它不是破解代码的最佳做法。

【参考方案10】：

选择仅适用于我的最新版本：

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

【参考方案11】：

我使用了 jQuery('select').chosen( disable_search: true );但是在 chrome profiler 上，无论如何调用了方法 search_field_scale 并且消耗了很多性能。

所以我删除了该方法和对他的所有调用，并在 show_search_field_default 上替换为 this.search_field.css('width': '100%') 并将 style=25px 替换为 style:100% 然后 this.search_field.css( 'width': '23px' ); result_select 因为“数据占位符”

对我来说工作得很好。

【参考方案12】：

disable_search:true,

Here is the document for chosen jquery plugin