What are the differences between Chosen and Select2?

Chosen and Select2 are the two more popular libraries for extending selectboxes.

Both seem to be actively maintained, Chosen is older and supports both jQuery and Prototype.

Select2 is jQuery only, its documentation says Select2 is inspired by Chosen, but doesn't detail any improvements made (if any) or other reasons for the rewrite.

Two libraries have pretty much same feature set, the only comparison I've found is a somewhat inconclusive jsperf test page.

Does any of these libraries have any advantages over the other?

57388 次浏览
小开

恕我直言，“选择”是“维护”，而不是“积极维护”。341期和51个请求。Select2有128个问题和25个拉请求。我认为这些图案基本上

  • 挑一个表面上对你更有吸引力的
  • 在一两个应用程序中使用它
  • 遇到定制问题或限制
  • 也许可以尝试通过问题和拉请求与社区合作
  • 最终受够了，用你在这个过程中学到的东西建立你自己的

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

小开

截至 Select23.3.1，下面是其 README.md 中的文档

Select2支持哪些选择不支持的内容？

  • 使用大型数据集: 选择要求在 DOM 中将整个数据集作为 option标记加载，这限制了它的使用范围 Select2使用一个函数来查找结果 运行中，允许它部分加载结果。
  • 结果分页: 由于 Select2处理大型数据集，并且一次只加载少量匹配结果，因此它必须支持 当用户滚动到 当前加载结果集的底部，允许“无限” 滚动结果。
  • 结果的自定义标记: “选择”只支持呈现文本结果，因为这是 option标记支持的唯一标记。 Select2提供了一个扩展点，可用于生成任何 一种代表结果的标记。
  • 动态添加结果的能力: Select2提供了从用户输入的搜索词中添加结果的能力，这允许它 用于标记。
小开

在 Select2中可以工作但在 Chosen 中不能工作的一个特性是 select内部元素具有 overflow: hidden或 overflow: auto。

enter image description here

相应问题的选择: https://github.com/harvesthq/chosen/issues/86

小开

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

由 P 特里斯考恩指出的 问题与 select是2岁，仍然没有正式修复。 根本就没有关于这个 API 的好文档。这个问题已经被指出过很多次了(见第671期) ，但是仍然没有答案。 他们花了将近2年的时间来解决这个 问题问题，如果你在展示之前用 overflow:hidden隐藏 div，那么选择这个选项基本上不会起作用(而且你必须使用一个 witdh:X%选项，如果你不查找这个问题，你基本上永远不会知道)。

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

我的 pull 请求修复了这个问题，但是就像我的另一个问题和许多问题一样 被选中的那些被忽略了。这个项目有太多 代码库太小的贡献者。

我首先选择了 Chosen 作为它的 MIT 许可证，但是我遇到了所有这些问题(下拉菜单，没有找到 API，寻找隐藏的溢出数小时) ，所以我决定切换到 select2，因为它有更好的文档，没有下拉菜单错误和更快的修复。

小开

在使用这两个插件时，我发现了一些不同之处:

  • 使用 select2，您可以在选项中的任何位置进行搜索。例如，如果你有一个名为 ABCDEFG 的选项，你输入 CDE，你会在搜索结果中看到这个选项，但是如果你选择了，你必须输入 AB。.等等以获得结果。

  • 我发现，对于更大的数据集，选择似乎比 select2更快，尤其是在 IE 中。

小开

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

在尝试了这两种方法之后，我决定两者都不使用——尝试获得 Select2创建项目功能结果是一件非常棘手的事情，因为当你连接到 <select>元素时就不能这样做了——它只是让我感觉不太好，因为我必须跳过这个环。

我已经决定使用 选择 js，它只是将新的 <option>...</option>元素添加到表单的 DOM 中——这是明智的。它也使用 LESS-但我会绕过这一点，只是裁剪编译的 CSS直接在您的项目。

小开

Select2支持移动设备，而 iPod、 iPhone 和移动 Android 上的选择 特别是使自己失去能力。如果你想在移动设备上使用“扩展”选择框，这使你的选择变得容易。

小开

我使用 Select2的经验在桌面上非常棒，但在触摸移动设备上差异很大，总是存在一些怪癖。例如，在 xperia st15i 上，由于键盘窃取焦点，带有 IC 和股票浏览器的下拉列表总是自动关闭。让它再次打开的唯一方法就是多次触摸菜单，握住手指一秒钟或者其他巫术。或者在下拉列表关闭时开始键入，有多少用户能够解决这个问题？

Js 似乎比 Select2平滑得多，但是它在移动端也有问题，例如当值被选中或输入时，由于某种原因，它会将页面一直向左移动。此外，在不支持溢出的老式 Android 2.x 设备上，不可能选择除了少数顶部选项之外的其他选项，因为键盘不会弹出。:(

仍然需要测试 Chosen，毕竟在移动设备上禁用它可能不是一个坏主意，但是最终好的老式下拉菜单总是可以在任何地方工作。

更新: 现在我也测试了 Chosen，它在一个方面更好: 默认情况下它不能在移动设备上工作(太棒了!)但是它有过滤文字的问题。例如，不在单词中间搜索，如果使用 & nbsp hack 进行对齐，它也会忽略完整的选项。重新开始。

小开

对比 select2.js

  • 都有麻省理工的执照
  • 依赖性:
    • 选择2: jQuery
    • 选择: tbc
  • 桌面浏览器支持:
    • 选择2: IE8 +
    • 选择: IE8 +
  • 设备支持:
    • 选择2: 不清楚
    • 选择: 禁用 iPhone，iPod Touch，和 Android 移动设备
  • 重量(缩小) :
    • 选择2:57KB
    • 选择: 27KB
  • 用法: Select2支持更“花哨”的 UI (参见“模板”)
  • 两种代码回购都可以在 Github 上找到
    • 选择2: 捐款: 非常活跃
    • 选定: 捐款: 比 Select2少3倍左右

select2.js contributions chosen.js contributions

当我找到更多关于缺失点的信息时，我会尽量更新这个答案

小开

Select2支持 AJAX 被选中的人不会

选择2的大小比选择的稍微重一点。

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

小开

为什么我选择了 select2而不是 Chosen

Select2的关键特性是“清除所有”选择，在控件的右手边有一个“ x”，这是其他控件都没有的自动特性。这是我的应用程序的一个杀手级特性。我不知道为什么其他选择的标记增强库没有这个特性。


提交答案