Chosen和Select2是用于扩展选择框的两个更受欢迎的库 .
两者似乎都得到了积极维护,Chosen更老,同时支持jQuery和Prototype .
Select2只是jQuery,它的文档说Select2的灵感来自Chosen,但没有详细说明所做的任何改进(如果有的话)或重写的其他原因 .
两个库具有相同的功能集,我发现的唯一比较是一个有点不确定的jsperf测试页面 .
这些库中是否有任何优势?
从Select2 3.3.1开始,下面是其README.md中记录的内容
选择的Select2支持不是什么?使用大型数据集:选择需要将整个数据集作为选项标签加载到DOM中,这限制了它使用小型数据集 . Select2使用函数即时查找结果,这允许它部分加载结果 . 分页结果:由于Select2适用于大型数据集,并且一次只加载少量匹配结果,因此必须支持分页 . 当用户滚动到当前加载的结果集的底部时,Select2将调用搜索功能,允许“无限滚动”结果 . 结果的自定义标记:选择仅支持呈现文本结果,因为这是选项标记支持的唯一标记 . Select2提供了一个扩展点,可用于生成任何类型的标记来表示结果 . 能够动态添加结果:Select2提供了从用户输入的搜索词添加结果的功能,这使得它可以用于标记 .
恕我直言选择是“维持”但不是“积极维护” . 选择了341个问题和51个拉取请求 . Select2有128个问题和25个拉取请求 . 我认为这些模式基本上是
挑选一个表面上更吸引你的人
在一两个应用程序中使用它
碰到定制问题或限制
也许尝试通过问题和拉取请求与社区合作
最终厌倦了,只使用你在这个过程中学到的东西 Build 你自己
无论你选择哪一个,如果你的用例完全在他们的最佳位置,任何一个都可以工作 . 如果没有,你最终必须自己编写或大量定制这些 . 在任何一种情况下,选择哪一个并不是那么重要 . 我想我会支持@Andy Ray和@paul,Select2可能是更好的初始选择 .
值得一提的另一个区别是 Chosen 是在 Sass 和 CoffeeScript 中开发的,而 Select2 是普通 CSS 和 JS . 我个人的选择是 Sass 和 CoffeeScript 是不必要的复杂层,这使得调试变得困难 .
Chosen
Sass
CoffeeScript
Select2
CSS
JS
在尝试了两个之后我决定不使用 - 试图获得 Select2 创建项目功能结果是一个非常毛茸茸的事情,因为你只是无法做到它附加到 <select> 元素 - 它只是没有深思熟虑的篮球我必须跳过 .
<select>
我已经决定使用selectize.js,它只是将新的 <option>...</option> 元素添加到表单的DOM中 - 这是理智的 . 它也使用 LESS - 但我会绕过它并直接在你的项目中定制编译的 CSS .
<option>...</option>
LESS
两者的麻省理工学院许可证
依赖关系:
Select2:jQuery
选择:tbc
桌面浏览器支持:
Select2:IE8
选择:IE8
设备支持:
Select2:不清楚
选择:在iPhone,iPod Touch和Android移动设备上禁用
重量(缩小):
Select2:57KB
选择:27KB
用法:Select2支持更多"fancy" UI(参见'templates')
两个代码库在Github上都可用
Select2:贡献:非常活跃
选择:贡献:比Select2小3倍左右
PS . 当我发现有关缺失点的更多信息时,我会尝试更新此答案
首先,让我告诉你,Chosen和Select2是两个很棒的插件,这是我对Chosen的个人经历 . 所有他们所说的都是关于选择的 .
PēterisHaune指出的issue与 select 是2岁,仍然没有正式修复 . API没有好的文档 . 很多时候已经指出(观察问题671)但仍然没有 . 他们花了差不多两年的时间来解决这个问题,如果你在显示它之前用 overflow:hidden 隐藏了div,那么选择它基本上是行不通的(你必须使用 witdh:X% 选项,如果你不寻找问题,你基本上不会知道) .
select
overflow:hidden
witdh:X%
我要说的主要问题是像第92期DelvarWorld所说的修复速度:
我的拉取请求解决了这个问题,但是就像我的另一个和许多被选中的一样,它们被忽略了 . 这个项目有太多的贡献者,代码库太少 .
我首先选择Chosen作为其MIT许可证,但我有所有这些问题(下拉切换,没有找到API,寻找溢出隐藏的时间),所以我决定切换到select2,因为它有更好的文档,没有下拉切割bug和更快的修复 .
一个在Select2中有效但在选择中不起作用的功能是具有 overflow: hidden 或 overflow: auto 的元素内部的 select .
overflow: hidden
overflow: auto
选择的相应问题:https://github.com/harvesthq/chosen/issues/86
我发现使用这两个插件的一些差异:
使用select2,您可以在选项中的任何位置进行搜索 . 对于例如如果您有一个名为ABCDEFG的选项并且您输入CDE,您将在搜索结果中获得该选项,但选择后您必须输入AB ..等等以获得结果 .
我发现,对于较大的数据集,选择似乎比select2更快,尤其是在IE中 .
Select2支持移动设备,而在iPod,iPhone和移动Android上选择specifically disables itself . 如果您想在移动设备上使用"extended"选择框,这将使您的选择变得简单 .
我对Select2的体验非常适合桌面,但触控移动设备的变化很大,总有一些怪癖 . 例如,在带有ics和stock浏览器的xperia st15i上,由于键盘窃取焦点,下拉列表总是关闭 . 只有这样才能让它再次打开就是触摸菜单几十次,握住手指一秒钟和其他伏都教魔法 . 或者在下拉列表关闭时开始输入,有多少用户会想出来?
Selectize.js似乎比Select2更顺畅,但它在移动设备上也存在问题,例如:当选择或输入值时,由于某种原因,它会将页面一直向左移动 . 此外,在不支持溢出的旧版Android 2.x设备上,由于键盘没有弹出,因此无法选择几个顶级选项 . :(
仍然需要测试选择,毕竟移动设备被禁用可能不是一个坏主意,但最终好旧的下拉列表始终无处不在 .
更新:现在我也测试了Chosen,它在一个领域更好:默认情况下它不适用于移动设备(太棒了!),但它有过滤字问题 . 例如,不在单词的中间搜索,如果使用   hack作为对象,它也将忽略完整的选项 . 回到绘图板 .
Select2支持AJAX选择不支持
与选择相比,选择2的尺寸稍微重一些 .
我切换到Select2,因为没有官方支持ajax操作 .
为什么我选择了select2而不是Chosen
关键功能select2具有自动神奇的其他控件,是“全部清除”选项,控件右侧带有“x” . 这是我的应用程序的杀手级功能 . 我不知道为什么其他选择标签增强库缺少此功能 .
11 回答
从Select2 3.3.1开始,下面是其README.md中记录的内容
恕我直言选择是“维持”但不是“积极维护” . 选择了341个问题和51个拉取请求 . Select2有128个问题和25个拉取请求 . 我认为这些模式基本上是
挑选一个表面上更吸引你的人
在一两个应用程序中使用它
碰到定制问题或限制
也许尝试通过问题和拉取请求与社区合作
最终厌倦了,只使用你在这个过程中学到的东西 Build 你自己
无论你选择哪一个,如果你的用例完全在他们的最佳位置,任何一个都可以工作 . 如果没有,你最终必须自己编写或大量定制这些 . 在任何一种情况下,选择哪一个并不是那么重要 . 我想我会支持@Andy Ray和@paul,Select2可能是更好的初始选择 .
值得一提的另一个区别是
Chosen
是在Sass
和CoffeeScript
中开发的,而Select2
是普通CSS
和JS
. 我个人的选择是Sass
和CoffeeScript
是不必要的复杂层,这使得调试变得困难 .在尝试了两个之后我决定不使用 - 试图获得
Select2
创建项目功能结果是一个非常毛茸茸的事情,因为你只是无法做到它附加到<select>
元素 - 它只是没有深思熟虑的篮球我必须跳过 .我已经决定使用selectize.js,它只是将新的
<option>...</option>
元素添加到表单的DOM中 - 这是理智的 . 它也使用LESS
- 但我会绕过它并直接在你的项目中定制编译的CSS
.chosen.js vs select2.js
两者的麻省理工学院许可证
依赖关系:
Select2:jQuery
选择:tbc
桌面浏览器支持:
Select2:IE8
选择:IE8
设备支持:
Select2:不清楚
选择:在iPhone,iPod Touch和Android移动设备上禁用
重量(缩小):
Select2:57KB
选择:27KB
用法:Select2支持更多"fancy" UI(参见'templates')
两个代码库在Github上都可用
Select2:贡献:非常活跃
选择:贡献:比Select2小3倍左右
PS . 当我发现有关缺失点的更多信息时,我会尝试更新此答案
首先,让我告诉你,Chosen和Select2是两个很棒的插件,这是我对Chosen的个人经历 . 所有他们所说的都是关于选择的 .
PēterisHaune指出的issue与
select
是2岁,仍然没有正式修复 . API没有好的文档 . 很多时候已经指出(观察问题671)但仍然没有 . 他们花了差不多两年的时间来解决这个问题,如果你在显示它之前用overflow:hidden
隐藏了div,那么选择它基本上是行不通的(你必须使用witdh:X%
选项,如果你不寻找问题,你基本上不会知道) .我要说的主要问题是像第92期DelvarWorld所说的修复速度:
我首先选择Chosen作为其MIT许可证,但我有所有这些问题(下拉切换,没有找到API,寻找溢出隐藏的时间),所以我决定切换到select2,因为它有更好的文档,没有下拉切割bug和更快的修复 .
一个在Select2中有效但在选择中不起作用的功能是具有
overflow: hidden
或overflow: auto
的元素内部的select
.选择的相应问题:https://github.com/harvesthq/chosen/issues/86
我发现使用这两个插件的一些差异:
使用select2,您可以在选项中的任何位置进行搜索 . 对于例如如果您有一个名为ABCDEFG的选项并且您输入CDE,您将在搜索结果中获得该选项,但选择后您必须输入AB ..等等以获得结果 .
我发现,对于较大的数据集,选择似乎比select2更快,尤其是在IE中 .
Select2支持移动设备,而在iPod,iPhone和移动Android上选择specifically disables itself . 如果您想在移动设备上使用"extended"选择框,这将使您的选择变得简单 .
我对Select2的体验非常适合桌面,但触控移动设备的变化很大,总有一些怪癖 . 例如,在带有ics和stock浏览器的xperia st15i上,由于键盘窃取焦点,下拉列表总是关闭 . 只有这样才能让它再次打开就是触摸菜单几十次,握住手指一秒钟和其他伏都教魔法 . 或者在下拉列表关闭时开始输入,有多少用户会想出来?
Selectize.js似乎比Select2更顺畅,但它在移动设备上也存在问题,例如:当选择或输入值时,由于某种原因,它会将页面一直向左移动 . 此外,在不支持溢出的旧版Android 2.x设备上,由于键盘没有弹出,因此无法选择几个顶级选项 . :(
仍然需要测试选择,毕竟移动设备被禁用可能不是一个坏主意,但最终好旧的下拉列表始终无处不在 .
更新:现在我也测试了Chosen,它在一个领域更好:默认情况下它不适用于移动设备(太棒了!),但它有过滤字问题 . 例如,不在单词的中间搜索,如果使用   hack作为对象,它也将忽略完整的选项 . 回到绘图板 .
Select2支持AJAX选择不支持
与选择相比,选择2的尺寸稍微重一些 .
我切换到Select2,因为没有官方支持ajax操作 .
为什么我选择了select2而不是Chosen
关键功能select2具有自动神奇的其他控件,是“全部清除”选项,控件右侧带有“x” . 这是我的应用程序的杀手级功能 . 我不知道为什么其他选择标签增强库缺少此功能 .