使用示例解释 Chosen 和 Select2

---

我们可以使用两个 jQuery 插件来设置选择框的样式，它们分别是 Select2 和 Chosen。这两个插件 Select2 和 Chosen 都可以改善选择框的外观并增强框的行为，从而使它们更易于用户使用。此外，这两个插件都可用于多选框和单选框。

Chosen

一个使选择框更易于用户使用的 JavaScript 插件，即 Chosen。Chosen 同时提供原型和 jQuery 版本。

Chosen 的特性

用户友好

您的用户不必费力地浏览大量的选项；他们只需开始输入他们正在寻找的项目的名称即可。选择替代方案只需按“回车”键或单击鼠标即可；不匹配的条目将从屏幕上移除。

渐进增强

由于 Chosen 替换了默认的 HTML Select 字段，因此无需再采取任何其他步骤即可使其在不支持 JavaScript 的浏览器中运行。后端也不使用事件来管理数据。

简单设置

只需将选定的文件包含在您的应用程序中并启用插件即可。Chosen 会自动尊重 opt-groups、选中状态、多个特性和浏览器选项卡顺序。

Select2

Select2 为用户提供了一个可自定义的选择框，可用于搜索、远程数据集、标记、无限滚动以及许多其他有用的属性。

Select2 的特性包括

除了支持搜索、标记、远程数据集、无限滚动等功能外，它还为用户提供了一个可自定义的选择框。

RTL 环境

它支持 RTL 环境，并内置了超过 40 种语言的搜索功能。

Ajax

您可以使用 Ajax 快速搜索项目的长列表。

使用 Sass 创建的完全可换肤的 CSS 以及可选的 Bootstrap 3 主题。

Chosen 的 Javascript 库

要在 JQuery 中使用 chosen 插件，我们必须添加一些库，如下所示：

• chosen.jquery.min.js

• chosen.min.css

此外，要激活所选框上的插件，我们必须添加如下代码段：

$(“.chosen-select”).chosen()

上面编写的代码段是 JQuery 中的脚本。

Select2 的 JavaScript 库

要在 jQuery 中使用 select2 插件，我们必须添加一些库，如下所示：

• select2.min.js

• select2.min.css

此外，要激活所选框上的插件，我们必须添加如下代码段：

$(“.chosen-select”).select2()

上面编写的代码段是 jQuery 中的脚本。

我们已经了解了 Chosen 和 Select2 的基础知识，现在让我们进入重点，即我们将要从几个方面看到的两者的区别。

Chosen 和 Select2 之间的区别

用于增强选择框的两个最常用的库是 Chosen 和 Select2。Chosen 比 Select2 更古老，并且支持 jQuery 和 Prototype。两者都在不断更新。Select2 受到 Chosen 的启发，并且只支持 jQuery。

让我们来看一下 Chosen 和 Select2 之间的区别：

加载数据

在使用 Chosen 加载数据时，它需要将整个数据集作为选项标签加载到 DOM 中，因此在处理小型数据集时存在限制。另一方面，Select2 使用函数的概念来动态查找结果，这使得 Select2 方法可以部分加载结果，从而克服了 Chosen 的缺点。

分页需求

正如我们在前一点中讨论的那样，Chosen 会一次性加载整个数据集，这意味着没有必要将数据分成多个部分，因此分页概念没有用武之地。另一方面，Select2 函数处理完整的数据集并部分加载所需的结果，并且它支持分页的概念。当用户滚动到底部时，它会调用搜索函数，通过加载更多数据来提供更多数据。

标记支持类型

Chosen 只通过选项标签提供渲染文本的标记支持，另一方面，Select2 提供了一个扩展点，可用于创建各种标记来表示结果。

添加结果

要添加结果，Chosen 和 Select2 都有两种选择：静态或动态，但 Chosen 无法动态添加结果，而 Select2 则与此相反，它允许通过使用标记动态添加结果。

开发

Chosen 使用 Sass 和 CoffeeScript 开发，而 Select2 使用纯 JavaScript 和 CSS 开发。

以上列出的差异是 Chosen 和 Select 之间的主要区别，还存在一些细微的差异，例如，Chosen 的大小为 27KB，而 Select2 的大小更大，为 57 KB。

注意 - 已发现 Saas 和 CoffeeScript 使调试 Chosen 变得更加困难。

Select2 公开支持移动设备，而 Chosen 则有意在某些设备上禁用自身。因此，如果您希望在移动设备上使用“扩展选择框”，建议使用 Select2。

结论

在本文中，我们了解到有两个 JQuery 插件可用于设置选择框的样式，它们分别是 Select2 和 Chosen。这两个插件 Select2 和 Chosen 都可以改善选择框的外观并增强框的行为，从而使它们更易于用户使用。Select2 和 Chosen 之间存在许多差异，包括数据加载过程、分页需求、动态添加结果的能力以及它们的开发方式。