¿Cuáles son las diferencias entre Chosen y Select2?

157

Chosen y Select2 son las dos bibliotecas más populares para extender selectboxes.

Ambos parecen mantenerse activamente, Chosen es más antiguo y es compatible con jQuery y Prototype.

Select2 es solo jQuery, su documentación dice que Select2 está inspirado en Chosen, pero no detalla las mejoras realizadas (si las hay) u otras razones para la reescritura.

Dos bibliotecas tienen prácticamente el mismo conjunto de características, la única comparación que he encontrado es una página de prueba jsperf algo no concluyente.

¿Alguna de estas bibliotecas tiene alguna ventaja sobre la otra?

Pablo
fuente
11
Su experiencia con las solicitudes de extracción es probablemente una buena pista de por qué Select2 comenzó como una reescritura, no como una bifurcación. También noté que Select2 tiene una documentación mejor (o al menos más larga).
Paul
1
Cuando importa o por el bien de la diferencia, Chosen es MIT mientras que Select2 tiene licencia de Apache.
EGL 2-101
2
Para ser precisos, Select2 está disponible bajo licencia Apache o GPL v2. is licensed under the Apache License, Version 2.0 (the "Apache License") or the GNU General Public License version 2
Paul

Respuestas:

92

A partir de Select2 3.3.1, a continuación se detallan los documentos en su archivo README.md

¿Qué soporta Select2 que los elegidos no tienen?

  • Trabajar con grandes conjuntos de datos: Chosen requiere que todo el conjunto de datos se cargue como optionetiquetas en el DOM, lo que lo limita a trabajar con conjuntos de datos pequeños. Select2 utiliza una función para buscar resultados sobre la marcha, lo que le permite cargar parcialmente los resultados.
  • Paginación de resultados: dado que Select2 funciona con grandes conjuntos de datos y solo carga una pequeña cantidad de resultados coincidentes a la vez, debe admitir la paginación. Select2 llamará a la función de búsqueda cuando el usuario se desplace hacia la parte inferior del conjunto de resultados actualmente cargado, lo que permite el 'desplazamiento infinito' de los resultados.
  • Marcado personalizado para resultados: Chosen solo admite la representación de resultados de texto porque ese es el único marcado admitido por las optionetiquetas. Select2 proporciona un punto de extensión que puede usarse para producir cualquier tipo de marcado para representar resultados.
  • Capacidad para agregar resultados sobre la marcha: Select2 proporciona la capacidad de agregar resultados del término de búsqueda ingresado por el usuario, lo que le permite ser utilizado para etiquetar.
Señor 14
fuente
2
por ejemplo, alguien trabajó en una función de "agregar resultados sobre la marcha" para Chosen: github.com/shezarkhani/chosen/tree/create_new_options Estoy usando algún tipo de adaptación en el complemento ExpressionEngine MX Select Plus (así es cómo Llegué aquí ya que ahora hay un complemento de la competencia usando Select2).
notacouch
Sin embargo, debe tenerse en cuenta que Select2 no tiene un respaldo cuando Javascript está deshabilitado, ya que las opciones se completan a través de AJAX.
deathlock
10
Nada que extraiga datos a través de AJAX funcionará sin Javascript. Select2 funciona bien con valores rellenados previamente y no tiene que usar AJAX.
zachzurn
@notacouch ¿Qué es "Matrix Support" y "Low Variables Support" y "SafeCracker support"? ¿Son estos conceptos específicos de ExpressionEngine?
John Zabroski
@JohnZabroski Sí, son complementos comerciales de EE 2.x (es posible que iirc SafeCracker haya sido incorporado).
notacouch
40

En mi humilde opinión, Elegido es "mantenido" pero no "mantenido activamente". 341 problemas y 51 solicitudes de extracción para Elegido. Select2 tiene 128 problemas y 25 solicitudes de extracción. Creo que el patrón para estos es básicamente

  • elige el que sea superficialmente más atractivo para ti
  • úsalo en una aplicación o dos
  • toparse con problemas o limitaciones de personalización
  • tal vez intente trabajar con la comunidad a través de problemas y solicitudes de extracción
  • eventualmente se harta y simplemente construye el tuyo usando lo que aprendiste en este proceso

Cualquiera que elija, si su caso de uso está exactamente en su punto óptimo, cualquiera funcionará. Si no, eventualmente tendrá que escribir el suyo o personalizarlo en gran medida. En cualquier caso, la elección de cuál específicamente no es tan importante. Creo que me pondré del lado de @Andy Ray y @paul aquí que Select2 es probablemente la mejor opción inicial.

Peter Lyons
fuente
44
En mi opinión, más problemas significa que más personas se preocupan y usan. Y una comunidad más grande tiende a producir un mejor código (esto no necesariamente se aplica a los elegidos). AngularJS: 397 números, 49 requisitos de extracción; joyent / nodo: 476 problemas, 98 requisitos de extracción. Me pregunto cuáles serían los números para firefox, linux kernel o gcc.
Paul
Sí, es solo una heurística. En teoría, un widget de selección automática debe ser de varios órdenes de magnitud de menor complejidad que algo como joyent / node. Estas cosas resultan ser muy personalizadas, por lo que tengo la sensación de que las personas están presentando solicitudes de extracción, que se ignoran, y luego van a mantener una bifurcación o reescribir por separado. YMMV.
Peter Lyons
Solo una nota si sus planes son ir con un enfoque de personalización: Chosen tiene una cantidad de código significativamente menor (aproximadamente 1/3), pero está escrito en CoffeeScript y SASS (antes de compilarse en JS / CSS). Si ya está familiarizado con CoffeeScript, entonces su elección es simple: Elegido será más fácil de comprender y personalizar.
Tim Dorr
@ Peter Lyons Estas son algunas métricas bastante extrañas que se utilizan para sacar su conclusión (no es que no esté de acuerdo con su conclusión). Eche un vistazo a la cantidad de contribuyentes (Select2 = 239 v. Chosen = 73) pero eso también puede ser engañoso, más no siempre es mejor. El pulso y los gráficos de cada proyecto de GitHub muestran el historial y la frecuencia de los compromisos junto con una tonelada de otras estadísticas útiles para tomar una decisión informada sobre qué proyecto puede "mantenerse" frente a "experimentar un desarrollo activo".
cfx
FWIW, Chosen ha tenido muchas actualizaciones en los últimos años.
Charles Wood
21

Otra diferencia que vale la pena mencionar es que Chosense desarrolla en Sassy CoffeeScriptmientras que Select2es simple CSSy JS. Es mi opción personal eso Sassy CoffeeScriptson capas innecesarias de complejidad que dificultan la depuración.

Después de probar ambos, he decidido no usar ninguno: intentar Select2crear la funcionalidad del elemento resulta ser muy complicado, ya que simplemente no puedes hacerlo cuando estás unido a los <select>elementos; simplemente no me sentí bien pensado en los aros que tendría para saltar

Me decidí a usar selectize.js que simplemente agrega el nuevo <option>...</option>elemento al DOM del formulario, y eso es correcto. También usa LESS, pero lo omitiría y simplemente adaptaría el compilado CSSdirectamente en su proyecto.

Daniel Sokolowski
fuente
2
selectize.jsusa menos . ¿Es eso un punto muerto tecnológico menor de lo que Sasses?
Chris Wesseling
No, está en el mismo dominio, pero de los tres selectize.js necesitó el menor ajuste para adaptarse al proyecto.
Daniel Sokolowski
selectize tiene problemas visuales en Firefox 28.
MEM
@MEM, ¿podrías ser más específico?
Daniel Sokolowski
En Firefox 28 (Mac OS X), notará un "margen o relleno o borde" gris adicional debajo de cada campo de entrada. No es un efecto, supongo. Debe ser una inconsistencia visual. Está claro una vez que los miramos en FF, y el mismo error no ocurre en Chrome, por ejemplo.
MEM
18

chosen.js vs select2.js

  • Licencia MIT para ambos
  • Dependencias:
    • Select2: jQuery
    • Elegido: por confirmar
  • Soporte de navegador de escritorio:
    • Select2: IE8 +
    • Elegido: IE8 +
  • Soporte del dispositivo:
    • Select2: poco claro
    • Elegido: deshabilitado en dispositivos móviles iPhone, iPod Touch y Android
  • Peso (minificado):
    • Seleccionar2: 57 KB
    • Elegido: 27 KB
  • Uso: Select2 admite una interfaz de usuario más "elegante" (consulte 'plantillas')
  • Ambos repositorios de código están disponibles en Github
    • Select2: contribuciones: muy activo
    • Elegido: contribuciones: alrededor de 3 veces menos que Select2

contribuciones de select2.js Contribuciones de elegido.js

PD. Intentaré actualizar esta respuesta cuando descubra más sobre los puntos faltantes

Adrien Be
fuente
Select2 debería admitir dispositivos móviles de la misma manera que otros. Intentamos asegurarnos de que funcione igual de bien, con toda la funcionalidad prevista, en todos los dispositivos.
Kevin Brown
1
Creo que la razón principal por la que select2 es más activo es porque están trabajando en select2 4.x, que es una reescritura importante. Sinceramente, no entiendo por qué la gente pone tanto énfasis en las contribuciones. ¡Ojalá GitHub tuviera un diagrama de flujo acumulativo que rastreara cosas importantes como la cobertura del código y los casos de prueba, así como el tiempo de respuesta promedio para los problemas! (Yo uso select2, por cierto, mi punto es simplemente una manía general acerca de las personas que se centran en las contribuciones y la ingeniería social que se siente alentado por los gráficos anteriores.)
John Zabroski
13

Primero, déjame decirte que Chosen y Select2 son dos excelentes complementos y esta es mi experiencia personal sobre Chosen. Todo lo que dicen es cierto con respecto a Elegido.

El problema señalado por Pēteris Caune con el selecttiene 2 años y todavía no hay una solución oficial. Simplemente no hay buena documentación para la API. Se ha señalado (ver número 671) muchas veces, pero todavía no hay nada. Les llevó casi 2 años resolver este problema donde el elegido básicamente no funcionaría si ocultaba el div overflow:hiddenantes de mostrarlo (y tiene que usar una witdh:X%opción que básicamente nunca sabría si no busca el problema).

Yo diría que el problema principal es la velocidad de reparación como dijo DelvarWorld en el número 92:

Mi solicitud de extracción soluciona este problema, pero al igual que el otro y muchos de los elegidos, se ignoran. Este proyecto tiene demasiados contribuyentes con una base de código demasiado pequeña.

Primero elegí Chosen para su licencia MIT, pero tuve todos estos problemas (corte desplegable, no encontrar la API, buscando horas para el desbordamiento oculto), así que decidí cambiar a select2 porque tiene una mejor documentación, no hay error de corte desplegable y correcciones más rápidas.

zipp
fuente
Solo para tener en cuenta que Select2 también tiene licencia bajo MIT. github.com/select2/select2/blob/master/LICENSE.md
ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
Esta respuesta es muy antigua y puede que ya no se aplique. Lo editaré cuando tenga tiempo.
zipp
9

Una característica que funciona en Select2 pero no funciona en Chosen es el selectelemento interno que tiene overflow: hiddeno overflow: auto.

ingrese la descripción de la imagen aquí

Problema correspondiente para Elegido: https://github.com/harvesthq/chosen/issues/86

Pēteris Caune
fuente
Estoy enfrentando el mismo problema con Chosen.
devXen
1
Puedes .chosen-drop { z-index: 999999 !important;}arreglar eso con los elegidos
Alireza Fattahi
6

Algunas diferencias que he encontrado trabajando con estos dos complementos:

  • Con select2 puede buscar en cualquier lugar de la opción. Por ejemplo, si tiene una opción llamada ABCDEFG y escribe CDE, obtendrá esa opción en los resultados de búsqueda, pero con la opción elegida debe escribir AB ... y así sucesivamente para obtener los resultados.

  • Descubrí que con conjuntos de datos más grandes, los elegidos parecen ser más rápidos que select2, especialmente en IE.

reggaemahn
fuente
2
Sí, Elegido parece buscar palabras, es decir, escribir Kingdomen su página de ejemplo devolverá, lo United Kingdomque parece una forma muy lógica de hacerlo, además de que también puede especificar $("#element").chosen({ search_contains: true });.
Daniel Sokolowski
2
Estoy de acuerdo con usted y, a menudo, ese es el caso, es decir. Estarías buscando palabras. Pero en muchos casos donde tiene cosas entre paréntesis como 'xyz (abc)' si escribe 'abc' también está buscando 'xyz' que no se devolverá. Supongo que se reduce al escenario en el que lo está utilizando. En mi aplicación web, he usado ambos cuando eran relevantes. Me gusta elegir un poco más solo por su velocidad de renderizado superior en IE.
reggaemahn
5

Select2 es compatible con dispositivos móviles, mientras que Chosen se desactiva específicamente en iPods, iPhones y dispositivos móviles Android. Si desea usar cuadros de selección "extendidos" en dispositivos móviles, esto hace que su elección sea fácil.

danvk
fuente
@RezaRahmati gracias por eso. ¿Probaste un iPhone también por casualidad? harvesthq.github.io/chosen/#faqs dice "Chosen está deshabilitado en dispositivos móviles iPhone, iPod Touch y Android". más en github.com/harvesthq/chosen/pull/1388
Adrien Be
@adrienbe sí, lo he probado en Samsung Galaxy Tab y iPad
Reza
@RezaRahmati, ¿cuál fue el resultado?
Adrien Be
@AdrienBe Funciona, lo he usado en medicfa.com/Users/Create?reloadList=false ábralo con la tableta y verifique el resultado
Reza
5

Mi experiencia con Select2 fue excelente en computadoras de escritorio, pero en dispositivos móviles táctiles fue muy variada, con algunas peculiaridades siempre presentes. Por ejemplo, en xperia st15i con ics y el menú desplegable del navegador siempre se cerraba debido al enfoque de robo de teclado. La única forma de volver a abrirlo es tocar el menú docenas de veces, mantener el dedo por un segundo y otra magia vudú. ¿O para comenzar a escribir mientras la lista desplegable está cerrada y cuántos usuarios resolverán esto?

Selectize.js parece ser mucho más suave que Select2, pero también tiene problemas por sí solo en el móvil, por ejemplo, cuando se selecciona o ingresa el valor, mueve la página completamente a la izquierda por alguna razón. Además, en dispositivos Android 2.x más antiguos que no admiten desbordamiento, es imposible seleccionar más allá de las pocas opciones principales, ya que el teclado no aparece. :(

Todavía tengo que probar Chosen y, después de todo, puede que no sea una mala idea estar deshabilitado para dispositivos móviles, pero al final el buen menú desplegable funciona siempre y en todas partes.

Actualización: ahora también he probado Chosen, y es mejor en un área: no funciona en dispositivos móviles de forma predeterminada (¡genial!), Pero tiene problemas de filtrado de palabras. Por ejemplo, no busca en el medio de las palabras, y si usa & nbsp hackear alineaciones, también ignorará las opciones completas. Volver a la mesa de dibujo.

dev101
fuente
Para habilitar correctamente la búsqueda en Elegido, agregue search_contains: truea sus opciones. Ver harvesthq.github.io/chosen/options.html
Sicco
1

Por qué elegí select2 sobre Elegido

La característica clave que tiene select2, que ningún otro control tiene automáticamente, es "Borrar todo" con la 'x' en la mano derecha del control. Esta es una característica excelente para mi aplicación. No sé por qué otras bibliotecas de mejora de etiquetas selectas carecen de esta característica.

John Zabroski
fuente
0

Select2 es compatible con AJAX Chosen.

Seleccione 2 es un poco más pesado en comparación con el elegido.

Cambié a Select2 porque no hay soporte oficial para las operaciones de ajax.

Yash
fuente