Javascript Chosen 和 Select2 之间有什么区别？

What are the differences between Chosen and Select2?

提问by Paul

Chosenand Select2are the two more popular libraries for extending selectboxes.

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

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

两者似乎都在积极维护，Chosen 较旧并且支持 jQuery 和 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.

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

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

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

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

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

回答by Mr. 14

As of Select2 3.3.1, below are what's documented in its README.md

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

What Does Select2 Support That Chosen Does Not?

• Working with large datasets: Chosen requires the entire dataset to be loaded as optiontags in the DOM, which limits it to working with small-ish datasets. Select2 uses a function to find results on-the-fly, which allows it to partially load results.
• Paging of results: Since Select2 works with large datasets and only loads a small amount of matching results at a time it has to support paging. Select2 will call the search function when the user scrolls to the bottom of currently loaded result set allowing for the 'infinite scrolling' of results.
• Custom markup for results: Chosen only supports rendering text results because that is the only markup supported by optiontags. Select2 provides an extension point which can be used to produce any kind of markup to represent results.
• Ability to add results on the fly: Select2 provides the ability to add results from the search term entered by the user, which allows it to be used for tagging.

Select2 支持哪些选择不支持？

• 使用大型数据集：Chosen 需要将整个数据集作为option标签加载到 DOM 中，这限制了它使用小型数据集。Select2 使用一个函数来即时查找结果，这允许它部分加载结果。
• 结果分页：由于 Select2 适用于大型数据集，并且一次仅加载少量匹配结果，因此必须支持分页。当用户滚动到当前加载的结果集的底部时，Select2 将调用搜索功能，允许“无限滚动”结果。
• 结果的自定义标记：Chosen 仅支持呈现文本结果，因为这是标签支持的唯一标记option。Select2 提供了一个扩展点，可用于生成任何类型的标记来表示结果。
• 动态添加结果的能力：Select2 提供了从用户输入的搜索词添加结果的能力，这使得它可以用于标记。

回答by Peter Lyons

IMHO Chosen is "maintained" but not "actively maintained". 341 issues and 51 pull requests for Chosen. Select2 has 128 issues and 25 pull requests. I think the pattern for these is basically

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

• pick whichever one is superficially more appealing to you
• use it in an app or two
• bump up against customization problems or limitations
• maybe try to work with the community via issues & pull requests
• eventually get fed up and just build your own using what you learned in this process

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

Whichever one you pick, if your use case is exactly in their sweet spot, either one will work. If not, you'll eventually have to write your own or heavily customize these. In either case, the choice of which one specifically isn't all that important. I guess I'll side with @Andy Ray and @paul here that Select2 is probably the better initial choice.

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

回答by Daniel Sokolowski

Another difference worth mentioning is that Chosenis developed in Sassand CoffeeScriptwhereas Select2is plain CSSand JS. It is my personal option that Sassand CoffeeScriptare unneeded layers of complexity which make debugging difficult.

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

After trying both I have decided to use neither - trying to get Select2create item functionality turns out to be a very hairy affair as you simply can not do it when attached to <select>elements - it just didn't feel well thought out the hoops I would have to jump through.

在尝试了两者之后，我决定两者都不使用 - 尝试获得Select2创建项目功能结果证明是一件非常麻烦的事情，因为当附加到<select>元素时你根本无法做到- 它只是没有考虑好我会拥有的箍跳过。

I have settled on using selectize.jswhich just adds the new <option>...</option>element to the form's DOM - and that is sane. It does also use LESS- but I would bypass that and just tailor the compiled CSSdirectly in your project.

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

回答by Adrien Be

chosen.js vs select2.js

selected.js 与 select2.js

• MIT license for both
• Dependencies:
  • Select2: jQuery
  • Chosen: tbc
• Desktop browser support:
  • Select2: IE8+
  • Chosen: IE8+
• Device support:
  • Select2: unclear
  • Chosen: disabled on iPhone, iPod Touch, & Android mobile devices
• Weight (minified):
  • Select2: 57KB
  • Chosen: 27KB
• Usage: Select2 supports more "fancy" UI (see 'templates')
• Both code repos are available on Github
  • Select2: contributions: very active
  • Chosen: contributions: around 3x less than Select2

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

ps. I will try to update this answer when I find out more about the missing points

附：当我发现有关缺失点的更多信息时，我会尝试更新此答案

回答by zipp

First, Let me tell you that Chosen and Select2 are two great plugin and this is my personal experience about Chosen. All what they are saying is true concerning Chosen.

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

The issuepointed by Pēteris Caune with the selectis 2 years old and still there is no official fix. There is simply no good documentation for the API. It has been pointed out (watch issue 671) many time but there is still nothing. It took them almost 2 years to solve this issuewhere chosen would basically not work if you hid the div with overflow:hiddenbefore showing it (and you have to use a witdh:X%option that you would basically never know if you don't look for the issue).

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

I'd say that the main problem is the fix speed like said DelvarWorld in issue 92:

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

My pull request fixes this issue, but like my other one and many of the ones for chosen they are being ignored. This project has too many contributors with too small of a code base.

我的拉取请求修复了这个问题，但就像我的另一个请求和许多被选择的请求一样，它们被忽略了。这个项目有太多的贡献者，但代码库太少。

I first picked Chosen for its MIT licence but I had all theses issues (dropdown cut, not finding the API, looking for hours for the overflow hidden), so I decided to switch to select2 because it has a better documentation, no dropdown cut bug and faster fixes.

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

回答by Pēteris Caune

One feature that works in Select2 but doesn't work in Chosen, is selectinside element that has overflow: hiddenor overflow: auto.

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

Corresponding issue for Chosen: https://github.com/harvesthq/chosen/issues/86

Chosen 对应 issue：https: //github.com/harvesthq/chosen/issues/86

回答by reggaemahn

Some differences I've found working with these two plugins:

我发现使用这两个插件时存在一些差异：

• With select2 you can search at any location in the option. For e.g. if you have an option called ABCDEFG and you type in CDE you will get that option in the search results but with chosen you have to type AB.. and so on to get the results.

• I've found that with larger datasets, chosen seems to be faster than select2, especially in IE.

• 使用 select2，您可以在选项中的任何位置进行搜索。例如，如果您有一个名为 ABCDEFG 的选项并且您输入 CDE，您将在搜索结果中获得该选项，但是选择了您必须输入 AB.. 以此类推才能获得结果。

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

回答by danvk

Select2 supports mobile, whereas Chosen specifically disables itselfon iPods, iPhones and mobile Android. If you want to use "extended" select boxes on mobile, this makes your choice easy.

Select2 支持移动设备，而 Chosen专门在 iPod、iPhone 和移动 Android 上禁用自身。如果您想在移动设备上使用“扩展”选择框，这将使您的选择变得容易。

回答by dev101

My experience with Select2 was great on desktop, but on touch mobile devices greatly varied, with some quirks always present. For example, on xperia st15i with ics and stock browser dropdown was always closing itself because of keyboard stealing focus. Only way to bring it open again is to touch the menu dozens of times, hold finger for a second and other voodoo magic. Or to start typing while the dropdown list is closed, and how many users will figure this out?

我在台式机上使用 Select2 的体验很棒，但在触摸式移动设备上却千差万别，总有一些怪癖。例如，在带有 ics 和股票浏览器下拉菜单的 xperia st15i 上，由于键盘窃取焦点，它总是自行关闭。再次打开它的唯一方法是触摸菜单数十次，按住手指一秒钟和其他巫术魔法。或者在下拉列表关闭时开始输入，有多少用户会明白这一点？

Selectize.js seems to be much smoother than Select2, but it also has issues on its own on mobile for e.g. when the value is selected or inputed it moves the page all the way to the left for some reason. Also, on older Android 2.x devices which do not support overflow, it is impossible to select past the few top options, since the keyboard does not pop-up. :(

Selectize.js seems to be much smoother than Select2, but it also has issues on its own on mobile for eg when the value is selected or inputed it moves the page all the way to the left for some reason. 此外，在不支持溢出的较旧的 Android 2.x 设备上，不可能选择过去的几个顶部选项，因为键盘不会弹出。:(

Still have to test Chosen and it might be not such a bad idea to be disabled for mobile devices after all, but in the end good old dropdown works always and everywhere.

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

Update: now I have also tested Chosen as well, and it is better in one area: it does not work on mobile by default (great!), but it has filtering words issues. For example, does not search in the middle of the words, and if you use &nbsphack for aligments, it will also ignore complete options. Back to drawing board.

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

回答by John Zabroski

Why I chose select2 over Chosen

为什么我选择 select2 而不是 Chosen

The key feature select2 has, that no other control has auto-magically, is "Clear all" selections with the 'x' in the right-hand of the control. This is a killer feature for my application. I do not know why other select tag enhancement libraries lack this feature.

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