没有搜索框的jQuery Chosen插件

Question

不确定是否已经涵盖了这个问题，但我在文档中找不到它，并且想知道是否可能使用jQuery选择插件（用于样式化选择输入）而不包括搜索输入框。具体来说，我想使用标准的选择一个而没有它。

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

- bob_cobb

---

只是瞎猜一下：你尝试设置 data-filter=false 了吗？ - matsr

@matsr 刚刚尝试了一下...不幸的是，那没起作用 :\ - bob_cobb

好的，那我不知道了。抱歉！祝你好运。 - matsr

Gunnarsson的回答是正确的方式：https://dev59.com/QGkw5IYBdhLWcg3wNn-h#13128429 - Capy

Answer 1

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

AbstractChosen.prototype.set_default_values

从变量中读取数值

this.options.disable_search

因此，您可以使用以下方法禁用搜索栏：

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

不使用固定数量的阈值。

- Munneson

---

一个人该如何学习关于属性和特性的知识呢？据我所知，没有文档，只有在Github上的简单介绍，内容过于轻量化，覆盖范围也不够广泛。 - Daniel

Answer 2

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

如果元素的选项数量小于disable_search_threshold（此处为2或更少），则搜索框将不会显示。

- Maxime Lafontaine

---

关于ajax-chosen，我可以在这里传递相同的参数吗？ - Borut Tomazin

Answer 3

我尝试使用文档，但没有成功，所以最终我做出了以下改变：

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

在调用chosen之后，我进行上述操作。 希望这可以帮到你。

- Dhiraj

---

还不错。虽然可能不是最好的方法，但它能够工作。不确定为什么我之前没有想到这样做。谢谢！ :) - bob_cobb

你也可以在你的CSS中使用“.chzn-search {display:none;}”来隐藏搜索框，但是在构造函数对象中使用“disable_search:true”的方式才是正确的。 - Roi

Answer 4

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

.chzn-select { display: none }

另外，对于单个元素，我会指定该元素并在末尾添加 _chzn 来对其进行目标化操作。

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

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

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

- Jef Furlong

---

只是提供信息：这样做会删除TAB键进入Chosen下拉列表的功能。我最初尝试了这个方法，但一旦我无法通过TAB键进入它（严格的辅助功能指南），我不得不选择disable_search选项。 - Simon Whitehead

Answer 5

新版本的jquery chosen提供了在下拉列表中禁用搜索输入框的选项。

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

旧版本不支持此选项。如果你严格禁止使用新版本，你可以使用

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

如果搜索结果少于5个，则会隐藏搜索框，最好与性别类型下拉菜单结合使用。另一种解决方法是：

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

在初始化后立即调用hide函数，不知道为什么这个技巧有效，但它确实可以实现你想要的效果！

建议使用最新版本，以便访问最新选项。

希望对你有帮助！

- Adnan

Answer 6

disable_search_threshold选项可以隐藏单选下拉框的搜索框。传入的数字指定了在显示搜索框之前允许的最大条目数。如果不需要搜索框，只需将其设置为一个比它将包含的项目数量更高的数字即可。

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

- fotijr

Answer 7

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

- sami

---

你好，欢迎来到Stack Overflow！这段代码可能会解决问题，但是通常最好还是给出一些代码解释。你应该知道，有很多新手来到Stack Overflow，在谷歌上寻找解决问题的方法，他们可以从你的专业知识中学到一些东西...但只有你解释清楚了，才能让他们真正受益。不要忘记，对你来说非常明显的事情，对于一个完全的新手来说可能并不明显 :) - Taryn East

Answer 8

使用以下代码禁用它：

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

不要忘记隐藏它，否则它仍将在移动设备上工作！

.chzn-search{display: none}

- GwenM

Answer 9

由于隐藏多个选择的搜索字段的选项没有一个能够正常工作，我在chosen.jquery.js的第577行进行了修改：

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

（用Span代替输入字段）。还需要注释掉这行代码。

this.search_field[0].disabled = false;

对我来说工作正常 - 即使这不是修改代码的最佳实践。

- Arerrac

Answer 10

我使用了jQuery('select').chosen( {disable_search: true} ); 但是在Chrome分析器中，search_field_scale方法仍然会被调用，并且会消耗大量性能。

所以我移除了该方法和对它的所有调用，并用this.search_field.css({'width': '100%'})替换了show_search_field_default中的style=25px，并将其替换为style:100% 然后 因为"data-placeholder"，我将this.search_field.css({ 'width': '23px' }); result_select

对我来说工作得很好。

- pedrolopes10