with multiple ejemplo chosen all javascript jquery-chosen jquery-select2

javascript - multiple - ¿Cuáles son las diferencias entre Elegido y Select2?



select2 tags (11)

Chosen y Select2 son las dos bibliotecas más populares para ampliar las cajas de selección.

Ambos parecen mantenerse activamente, Elegido es más antiguo y admite jQuery y Prototype.

Select2 solo es jQuery, su documentación dice que Select2 está inspirado por 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 poco concluyente.

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

elegido.js vs select2.js

  • Licencia de MIT para ambos
  • Dependencias:
    • Select2: jQuery
    • Elegido: tbc
  • Soporte de navegador de escritorio:
    • Select2: IE8 +
    • Elegido: IE8 +
  • Soporte del dispositivo:
    • Select2: confuso
    • Elegido: deshabilitado en dispositivos móviles iPhone, iPod Touch y Android
  • Peso (minificado):
    • Select2: 57KB
    • Elegido: 27KB
  • Uso: Select2 admite más UI "elegante" (ver "plantillas")
  • Ambos repos de código están disponibles en Github
    • Select2: contribuciones: muy activo
    • Elegido: contribuciones: alrededor de 3 veces menos que Select2

PD. Intentaré actualizar esta respuesta cuando sepa más sobre los puntos que faltan

A partir de Select2 3.3.1, a continuación se muestra lo que está documentado en su archivo README.md

¿Qué no admite Select2 Support That Chosen?

  • Trabajar con grandes conjuntos de datos: Elegido requiere que todo el conjunto de datos se cargue como etiquetas de option en el DOM, lo que lo limita a trabajar con conjuntos de datos pequeños. Select2 usa una función para buscar resultados sobre la marcha, lo que le permite cargar resultados parcialmente.
  • Paginación de resultados: como 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 desplaza hacia la parte inferior del conjunto de resultados actualmente cargado, lo que permite el "desplazamiento infinito" de los resultados.
  • Marcas personalizadas para obtener resultados: Elegido solo admite la presentación de resultados de texto porque es el único marcado admitido por las etiquetas de option . Select2 proporciona un punto de extensión que se puede usar para producir cualquier tipo de marcado para representar los resultados.
  • Posibilidad de agregar resultados sobre la marcha: Select2 brinda la posibilidad de agregar resultados del término de búsqueda ingresado por el usuario, lo que permite su uso para el etiquetado.

Algunas diferencias que he encontrado trabajando con estos dos complementos:

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

  • Descubrí que con conjuntos de datos más grandes, el elegido parece ser más rápido que select2, especialmente en IE.

En mi humilde opinión, "Elegido", 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

  • elija cualquiera que sea superficialmente más atractivo para usted
  • usarlo en una aplicación o dos
  • chocar contra los 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 construya el suyo usando lo que aprendió en este proceso

Cualquiera que escoja, si su caso de uso está exactamente en su punto óptimo, cualquiera de los dos funcionará. Si no, eventualmente tendrá que escribir su propio diseño 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, que Select2 es probablemente la mejor opción inicial.

Mi experiencia con Select2 fue genial en el escritorio, pero en los dispositivos móviles táctiles fue muy variada, con algunos caprichos siempre presentes. Por ejemplo, en xperia st15i con ics y el menú desplegable del navegador de stock siempre se cerraba debido al enfoque de robo de teclado. La única manera de abrirlo nuevamente es tocar el menú docenas de veces, mantener el dedo durante un segundo y otra magia vudú. ¿O 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 propios en el móvil, por ejemplo, cuando el valor se selecciona o se imputa, mueve la página completamente hacia la izquierda por algún motivo. Además, en dispositivos Android 2.x anteriores que no admiten el desbordamiento, es imposible seleccionar más allá de las pocas opciones principales, ya que el teclado no aparece. :(

Todavía tenemos que evaluar a Chosen y, después de todo, no es una mala idea estar deshabilitados para dispositivos móviles, pero al final la buena lista desplegable funciona siempre y en todas partes.

Actualización: ahora también he probado Elegido, y es mejor en un área: no funciona en el móvil por defecto (¡genial!), Pero tiene problemas de filtrado de palabras. Por ejemplo, no busca en medio de las palabras, y si usa & nbsp hack para alineaciones, también ignorará las opciones completas. De vuelta al tablero de dibujo.

Otra diferencia que vale la pena mencionar es que Chosen está desarrollado en Sass y CoffeeScript mientras que Select2 es simple CSS y JS . Es mi opción personal que Sass y CoffeeScript sean capas innecesarias de complejidad que dificultan la depuración.

Después de probar ambos, he decidido no usar ninguno: tratar de conseguir que Select2 cree que la funcionalidad de los elementos resulta ser muy peluda, ya que simplemente no puedes hacerlo cuando está unida a elementos <select> , simplemente no se sentía bien pensado. aros que tendría que saltar.

Me he decidido a utilizar selectize.js que simplemente agrega el nuevo elemento <option>...</option> al DOM del formulario, y eso es sensato. También usa LESS , pero lo omitiría y solo adaptaría el CSS compilado directamente en su proyecto.

Primero, déjame decirte que Elegido y Selectivo son dos grandes complementos y esta es mi experiencia personal sobre Elegido. Todo lo que dicen es verdad con respecto a Elegido.

La issue apuntada por Pēteris Caune con el select tiene 2 años y todavía no hay una solución oficial. Simplemente no hay una buena documentación para la API. Se ha señalado (ver número 671) muchas veces, pero todavía no hay nada. Les tomó casi 2 años resolver este issue donde lo elegido básicamente no funcionaría si escondieras el div con overflow:hidden antes de mostrarlo (y tienes que usar una opción witdh:X% que básicamente nunca sabrías si no lo haces) buscar el problema).

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

Mi solicitud de extracción corrige este problema, pero al igual que mi otro y muchos de los elegidos están siendo ignorados. Este proyecto tiene demasiados contribuyentes con una base de código demasiado pequeña.

Escogí por primera vez a Chosen para su licencia de MIT pero tenía todos estos problemas (menú desplegable, no encontrar la API, buscando horas para el desbordamiento oculto), así que decidí cambiar a select2 porque tiene una mejor documentación, sin errores de corte desplegable y correcciones más rápidas.

Select2 admite AJAX Elegido no

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

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

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

Una característica que funciona en Select2 pero no funciona en Chosen, es select element que tiene overflow: hidden o overflow: auto .

Problema correspondiente para Chosen: issue

Por qué elegí select2 sobre Elegido

La característica clave que tiene select2, que ningún otro control tiene auto-mágicamente, 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.