JavaScript 中 Chosen 和 Select2 的区别

在这个例子中，我们将解释 JavaScript 的Chosen和Select2插件，并强调两者之间的主要区别。在我们讨论这个主题之前，让我们看看这两个插件。

Chosen： Chosen 是一个用于 jQuery、Prototype 和 Mootools 的 JavaScript 插件，可创建长而大的用户友好选择框。

选择的主要特点：

1. 用户友好：与其强迫您的用户滚动浏览一个巨大的项目列表，他们只需在他们正在寻找的项目名称上标记星号。不匹配的条目将从视图中删除，单击“输入”或单击鼠标就足以选择选项。
2. 渐进式增强： Chosen 消除了进行任何特殊操作以使其适用于没有 JavaScript 的浏览器的麻烦，因为Chosen取代了普通的 HTML Select字段。后端也没有处理数据的事件。
3. 无痛设置：选择自动尊重选择组、选定状态、多个属性和浏览器选项卡顺序，只需将选择的文件添加到您的应用程序并触发插件。

Select2：创建Select2以替换浏览器显示的标准选择标签。它支持标准选择框中可用的所有选项和操作，但具有更大的灵活性。 Select2的一些特点是：

• 可定制：它提供用户可定制的选择框以及对搜索、标记、远程数据集、无限滚动和许多其他选项的支持。
• RTL 环境：它支持 RTL 环境，内置搜索 40 多种语言。
• Ajax：使用 Ajax，您可以有效地搜索大型项目列表。
• CSS：完全可换肤，使用Sass构建的 CSS 和 Bootstrap 3 的可选主题。

  选择和选择2之间的区别：
  Chosen 和 Select2 是两个最流行的扩展选择框的库。两者都得到积极维护， Chosen比Select2更老，并且支持 jQuery 和 Prototype。 Select2仅支持 jQuery，Select2 的灵感来自Chosen 。

  Chosen	Select2
  Chosen needs the entire dataset to be loaded as option tags in the DOM, which limits it to working with kind of small datasets.	Select2 uses a function to find results dynamically, which allows it to partially load results.
  Since Chosen needs the entire dataset to be loaded there is no need for paging.	As Select2 works with large datasets and only loads small amount of matching results it has to support paging. Select2 will call the search function when the user scrolls to the bottom of currently loaded result allowing to load more results.
  Chosen only supports rendering text results because it is the only markup supported by the option tags.	Select2 provides an extension point which can be used to produce any kind of markup to represent results.
  Chosen does not support the ability to add results dynamically.	Select2 provides the ability to add results from the search term entered by the user, which allows it to be used for tagging.
  Chosen is developed in Sass and CoffeeScript.	Select2 is plain CSS and JS.
  Size: 27KB	Size: 57KB
  The select inside element that has overflow: hidden or overflow: auto; does not work in Chosen.	Select2 supports this feature.
  In Chosen, if you have an option called GeeksForGeeks, you have to type Gee… and so on to get the results.	With Select2 you can start search at any location of the phrase. For example, you can type eek and you will get GeeksForGeeks option in the search result as it contains “eek”.

  备注：已经发现 Saas 和 CoffeeScript 在 Chosen 的调试过程中造成了更大的困难。
  Select2 支持移动设备，而 Chosen 在移动平台上明确禁用自身。因此，如果您想在移动设备上使用“扩展选择框”，建议使用 Select2。