极客笔记用例解释Chosen和Select2
有两个可以用来美化选择框的jQuery插件，它们分别是Select2和Chosen。这两个插件都可以改善选择框的外观，并增强选择框的行为，使其更加用户友好。此外，这两个插件都可以用于多个选择框和单个选择框。
Chosen
Chosen是一个创建用户友好的选择框的 JavaScript 插件。Chosen可以在原型和jQuery版本中使用。
Chosen的功能
用户友好
您的用户不需要费力浏览一大堆可能性，他们只需输入他们正在寻找的事物的名称。选择替代方案只需按下“Enter”键或点击鼠标，不匹配的条目将从屏幕上删除。
渐进增强
由于Chosen替换了默认的HTML Select字段，因此在不支持JavaScript的浏览器中，不再需要采取任何进一步的步骤来使其运行。后端也不使用事件来管理数据。
简单设置
只需将所选文件包含在您的应用程序中并启用插件即可。选择的选项组、选定状态、多个特性和浏览器选项卡顺序都会自动得到Chosen插件的支持。
Select2
Select2为用户提供了一个可自定义的选择框，可用于搜索、远程数据集、标记、无限滚动等许多有用的属性。
Select2的功能
它为用户提供了一个可自定义的选择框，除此之外还支持搜索、标记、远程数据集、无限滚动和许多其他选项。
RTL环境
它支持RTL环境，并内置对40多种语言的搜索功能。
Ajax
您可以使用Ajax快速搜索一个长列表中的项目。
可以使用Sass创建完全可自定义的CSS，并有一个可选的Bootstrap 3主题。
Chosen的Javascript库
使用Chosen插件在jQuery中，我们需要添加一些库，如下所示 –
此外，为了在选择框上激活插件，我们需要添加以下代码片段 –
$(“.chosen-select”).chosen()
以上代码片段是JQuery中的脚本。
Select2的JavaScript库
要在jQuery中使用select2插件，我们必须添加一些库，如下所示-
- select2.min.js
-
select2.min.css
另外，要在选定的框上激活该插件，我们必须添加以下代码段-
$(“.chosen-select”).select2()
上述的代码片段是使用jQuery编写的脚本。
我们已经了解了chosen和select2的基础知识，现在让我们来看一下它们之间的区别。
chosen和select2的区别
改进select框最常用的两个库是chosen和select2。Chosen比Select2更古老，同时支持jQuery和Prototype。两者都在不断更新。Select2是受Chosen启发的，仅支持jQuery。
让我们来看一下chosen和select2之间的区别：
加载数据
使用chosen加载数据时，需要将整个数据集作为选项标签加载到DOM中，这会导致在处理较小数据集时有一定的限制。另一方面，Select2使用函数的概念，以便动态查找结果，这允许select2方法部分加载结果，并消除了chosen的缺点。
翻页的要求
正如前面所讨论的，Chosen一次性加载整个数据集，这意味着不需要将数据分成多个部分，所以翻页概念是无用的。另一方面，Select2方法使用完整数据集并部分加载所需结果，它支持翻页的概念。当用户滚动到当前数据底部时，它将调用搜索函数以加载更多数据。
标记支持的类型
通过选项标签，chosen仅支持呈现文本的标记支持，而Select2提供了扩展点可以用来制作各种标记来表示结果。
添加结果
添加结果有两种选择，chosen和select2都可以选择静态或动态方式。但是chosen无法动态添加结果，而select2则完全相反，可以使用标记添加结果。
开发
使用Sass和CoffeeScript来开发chosen，而使用纯JavaScript和CSS来开发select2。
上述给出的区别是chosen和select之间的主要区别，还存在一些次要区别，例如，chosen的大小为27KB，而select2的大小更大，为57KB。
注意 - Saas和CoffeeScript在调试Chosen时常常更加困难。
Select2公开支持移动设备，而Chosen有意在某些设备上禁用自己。因此，建议在移动设备上使用Select2来使用“展开的选择框”。
结论
在本文中，我们学习了两个jQuery插件，即Select2和Chosen，可以用来样式化选择框。这两个插件都改善了选择框的外观，并增强了选择框的行为，使其更加用户友好。Select2和chosen之间存在许多差异，包括数据加载过程、分页的需求、动态添加结果的能力以及它们的开发方式。