选择和选择2有什么区别？答案

【问题标题】：What are the differences between Chosen and Select2?选择和选择2有什么区别？
【发布时间】：2012-11-14 13:26:56
【问题描述】：

Chosen 和 Select2 是两个比较流行的扩展选择框的库。

似乎都在积极维护，Chosen 比较老，并且支持 jQuery 和 Prototype。

Select2 只是 jQuery，它的文档说 Select2 是受 Chosen 启发的，但没有详细说明所做的任何改进（如果有的话）或重写的其他原因。

两个库具有几乎相同的功能集，我发现的唯一比较是一个有点不确定的 jsperf 测试页面。

这些库中的任何一个都比其他库有什么优势吗？

【问题讨论】：

您对拉取请求的经验可能很好地暗示了为什么 Select2 是作为重写而不是分叉开始的。我还注意到 Select2 有更好（或至少更长）的文档。
当重要或为了区别选择的是 MIT 而 Select2 是 Apache 许可的。
准确地说，Select2 在 Apache 许可或 GPL v2 下可用。 is licensed under the Apache License, Version 2.0 (the "Apache License") or the GNU General Public License version 2

标签： javascript jquery-chosen jquery-select2

【解决方案1】：

从 Select2 3.3.1 开始，以下是其 README.md 中记录的内容

Select2 支持哪些选择不支持？

处理大型数据集：选择需要将整个数据集加载为 DOM 中的option 标签，这限制了它使用小型数据集。 Select2 使用函数查找结果即时，允许它部分加载结果。

结果分页：由于 Select2 可以处理大型数据集，并且一次只加载少量匹配结果，因此它必须支持分页。 Select2 将在用户滚动到时调用搜索函数当前加载的结果集的底部允许'无限滚动”结果。

结果的自定义标记：Chosen 仅支持呈现文本结果，因为这是 option 标记支持的唯一标记。 Select2 提供了一个扩展点，可用于生成任何一种表示结果的标记。

动态添加结果的能力：Select2 提供了从用户输入的搜索词中添加结果的能力，这允许它用于标记。

【讨论】：

fwiw 有人确实为 Chosen 开发了“即时添加结果”功能：github.com/shezarkhani/chosen/tree/create_new_options 我在 ExpressionEngine 附加组件MX Select Plus 中使用了它的某种改编（它是如何我来到这里是因为现在有一个使用 Select2 的竞争插件。
应该注意的是，当禁用 Javascript 时 Select2 没有回退，因为选项是通过 AJAX 填充的。
没有 Javascript，任何通过 AJAX 提取数据的东西都无法工作。 Select2 可以很好地处理预填充的值，并且不必使用 AJAX。
@notacouch 什么是“矩阵支持”、“低变量支持”和“SafeCracker 支持”？这些概念是 ExpressionEngine 特有的吗？
@JohnZabroski 是的，它们是商业 EE 2.x 附加组件（iirc SafeCracker 可能已内置）。

【解决方案2】：

恕我直言，选择是“维护”但不是“积极维护”。 Chosen 的 341 个问题和 51 个拉取请求。 Select2 有 128 个问题和 25 个拉取请求。我认为这些模式基本上是

选择表面上对你更有吸引力的那个
在一两个应用程序中使用它
遇到定制问题或限制
也许可以尝试通过问题和拉取请求与社区合作
最终受够了，并使用您在此过程中学到的知识构建自己的

无论您选择哪一个，如果您的用例恰好处于最佳位置，那么任何一个都可以工作。如果没有，您最终将不得不自己编写或大量定制这些内容。在任何一种情况下，具体选择哪一个都不是那么重要。我想我会在这里支持@Andy Ray 和@paul，Select2 可能是更好的初始选择。

【讨论】：

在我看来，更多的问题意味着更多的人关心和使用。更大的社区往往会产生更好的代码（这不一定适用于选择）。 AngularJS：397 个问题，49 个拉取请求； Joyent/节点：476 个问题，98 个请求请求。我想知道 firefox、linux 内核或 gcc 的数字是多少。
是的，这只是一种启发式方法。从理论上讲，自动选择小部件的复杂性应该比 Joyent/node 低几个数量级。这些事情被证明是高度定制的，所以我感觉人们正在提交拉取请求，这些请求被忽略了，然后他们去维护一个单独的分叉或重写。 YMMV。
如果您计划采用自定义方法，请注意：Chosen 的代码量要少得多（大约 1/3），但是是用 CoffeeScript 和 SASS 编写的（在编译为 JS 之前） /CSS）。如果您已经熟悉 CoffeeScript，那么您的选择很简单：Chosen 将更容易理解和定制。
@Peter Lyons 这些是用于得出您的结论的一些非常奇怪的指标（并不是我不同意您的结论）。看看贡献者的数量（Select2 = 239 v. Chosen = 73），但这也可能会产生误导，更多并不总是更好。每个 GitHub 项目的 Pulse 和 Graphs 显示提交历史记录和频率以及大量其他有用的统计数据，以便就哪个项目可以“维护”还是“正在进行积极开发”做出明智的决定。
FWIW，Chosen 在过去几年里有很多更新。

【解决方案3】：

另一个值得一提的区别是Chosen 是在Sass 和CoffeeScript 中开发的，而Select2 是普通的CSS 和JS。我个人的选择是Sass 和CoffeeScript 是不必要的复杂层，这使得调试变得困难。

在尝试了这两种方法后，我决定都不使用 - 试图获得 Select2 创建项目功能结果是一件非常麻烦的事情，因为当附加到 <select> 元素时你根本无法做到 - 它只是没有觉得我必须跳的圈子是经过深思熟虑的。

我已经决定使用 selectize.js，它只是将新的 <option>...</option> 元素添加到表单的 DOM 中——这很正常。它也使用LESS - 但我会绕过它，直接在您的项目中定制编译后的CSS。

【讨论】：

selectize.js 使用 less。与Sass 相比，这不是技术死胡同吗？
不，它在同一个域中，但在三个 selectize.js 中需要最少的调整来适应项目。
selectize 在 Firefox 28 上存在视觉问题。
@MEM 你能说得更具体一点吗？
在 Firefox 28 (Mac OS X) 中，您会注意到每个输入字段下方有一个额外的灰色“边距或填充或边框”。这不是我想的效果。这一定是视觉上的不一致。一旦我们在 FF 上查看它们就很清楚了，例如，在 Chrome 上不会出现同样的故障。

【解决方案4】：

chosen.js 与 select2.js

两者的 MIT 许可证
依赖关系：
- 选择2：jQuery
- 已选择：待定
桌面浏览器支持：
- 选择2：IE8+
- 选择：IE8+
设备支持：
- Select2：不清楚
- 已选择：在 iPhone、iPod Touch 和 Android 移动设备上禁用
重量（缩小）：
- 选择2：57KB
- 已选择：27KB
用法：Select2 支持更多“花哨”的 UI（参见“模板”）
两个代码库都可以在 Github 上找到
- Select2：贡献：非常活跃
- 已选择：贡献：大约比 Select2 少 3 倍

ps。当我发现更多关于缺失点的信息时，我会尝试更新这个答案

【讨论】：

Select2 应该以与其他设备相同的方式支持移动设备。我们努力确保它在所有设备上都能正常工作，并具有所有预期功能。
我认为 select2 更活跃的主要原因是他们正在研究 select2 4.x，这是一次重大的重写。老实说，我不明白为什么人们如此重视贡献。我希望 GitHub 有一个累积流程图，可以跟踪代码覆盖率和测试用例等重要事项，以及问题的平均响应时间！（我使用 select2，顺便说一句，我的观点只是对人们关注贡献和上面图表所鼓励的社会工程的普遍不满。）

【解决方案5】：

首先，让我告诉你，Chosen 和 Select2 是两个很棒的插件，这是我对 Chosen 的个人体验。他们所说的关于天选者的一切都是真的。

Pēteris Caune 指出的issue 和select 已经使用了 2 年，但仍然没有官方修复。 API 根本没有好的文档。已经多次指出（观看第 671 期），但仍然一无所获。他们花了将近 2 年的时间来解决这个 issue 如果你在显示它之前用 overflow:hidden 隐藏 div 选择基本上不起作用（并且你必须使用 witdh:X% 选项，如果你不这样做，你基本上永远不会知道'不要寻找问题）。

我想说主要问题是修复速度，就像第 92 期中所说的 DelvarWorld：

我的拉取请求解决了这个问题，但就像我的其他一个和许多那些被选择的他们被忽略了。这个项目太多了代码库太少的贡献者。

我最初选择 Chosen 是因为它的 MIT 许可证，但我遇到了所有这些问题（下拉菜单、找不到 API、寻找隐藏溢出的时间），所以我决定切换到 select2，因为它有更好的文档，没有下拉减少错误和更快的修复。

【讨论】：

请注意 Select2 也获得了 MIT 许可。 github.com/select2/select2/blob/master/LICENSE.md
这个答案真的很老，可能不再适用。有时间我会编辑的。

【解决方案6】：

在 Select2 中有效但在 Chosen 中无效的一个功能是 select 内部元素具有 overflow: hidden 或 overflow: auto。

Chosen 的对应问题：https://github.com/harvesthq/chosen/issues/86

【讨论】：

我在 Chosen 遇到了同样的问题。
你可以用 .chosen-drop { z-index: 999999 !important;} 来解决这个问题

【解决方案7】：

我发现使用这两个插件的一些不同之处：

使用 select2，您可以在选项中的任何位置进行搜索。例如如果您有一个名为 ABCDEFG 的选项并输入 CDE，您将在搜索结果中获得该选项，但选择后您必须输入 AB.. 等等才能获得结果。
我发现对于较大的数据集，choose 似乎比 select2 更快，尤其是在 IE 中。

【讨论】：

Yes Chosen 似乎在搜索单词，即在他们的示例页面上输入Kingdom 将返回United Kingdom，这似乎是一种非常合乎逻辑的方式，而且您还可以指定$("#element").chosen({ search_contains: true });。
我同意你的观点，而且通常情况就是这样。你会在找词。但是在许多情况下，如果您键入 'abc'，则在括号中包含诸如 'xyz(abc)' 之类的内容，您也在寻找不会返回的 'xyz'。我想，这归结为您使用它的场景。在我的网络应用程序中，我在相关的地方都使用了这两个。我喜欢选择多一点，只是因为它在 IE 中的渲染速度更快。

【解决方案8】：

Select2 支持移动设备，而在 iPod、iPhone 和移动 Android 设备上选择 specifically disables itself。如果您想在移动设备上使用“扩展”选择框，这会让您的选择变得容易。

【讨论】：

@RezaRahmati 对此表示感谢。您是否也尝试过iPhone？ harvesthq.github.io/chosen/#faqs 表示“已在 iPhone、iPod Touch 和 Android 移动设备上禁用选择”。更多关于github.com/harvesthq/chosen/pull/1388
@adrienbe 是的，我已经在三星 Galaxy Tab 和 iPad 上测试过了
@RezaRahmati 结果如何？
@AdrienBe 可以，我在medicfa.com/Users/Create?reloadList=false用过，用平板打开看看效果

【解决方案9】：

我在桌面设备上使用 Select2 的体验非常棒，但在触控移动设备上却大不相同，总有一些怪癖。例如，在带有 ics 和股票浏览器下拉菜单的 xperia st15i 上，由于键盘窃取焦点，它总是自行关闭。再次打开它的唯一方法是触摸菜单数十次，按住手指一秒钟以及其他巫术魔法。或者在下拉列表关闭时开始输入，有多少用户会解决这个问题？

Selectize.js 似乎比 Select2 更流畅，但它在移动设备上也存在问题，例如选择或输入值时，它会出于某种原因向左移动页面。此外，在不支持溢出的较旧的 Android 2.x 设备上，不可能选择超过几个顶部选项，因为键盘不会弹出。 :(

仍然需要测试 Chosen，毕竟禁用移动设备可能不是一个坏主意，但最终好的旧下拉菜单始终在任何地方都有效。

更新：现在我也测试了 Chosen，它在一个方面更好：默认情况下它不能在移动设备上运行（太棒了！），但它有过滤词的问题。例如，不在单词中间搜索，如果您使用 &nbsp hack 进行对齐，它也会忽略完整的选项。回到绘图板。

【讨论】：

要正确启用 Chosen 中的搜索，请将 search_contains: true 添加到您的选项中。见harvesthq.github.io/chosen/options.html

【解决方案10】：

为什么我选择 select2 而不是 Chosen

select2 的关键特性是其他控件没有自动神奇的，它是“清除所有”选择，在控件的右侧带有“x”。这是我的应用程序的杀手级功能。不知道为什么其他select标签增强库没有这个功能。

【讨论】：

【解决方案11】：

Select2 支持 AJAX 选择不

与选择的相比，选择 2 的尺寸稍重。

我切换到 Select2 因为没有官方支持 ajax 操作。

【讨论】：