Was sind die Unterschiede zwischen Chosen und Select2?

157

Chosen und Select2 sind die beiden beliebtesten Bibliotheken zum Erweitern von Selectboxen.

Beide scheinen aktiv gepflegt zu sein, Chosen ist älter und unterstützt sowohl jQuery als auch Prototype.

Select2 ist nur jQuery. In der Dokumentation heißt es, dass Select2 von Chosen inspiriert ist, jedoch keine Verbesserungen (falls vorhanden) oder andere Gründe für das Umschreiben enthält.

Zwei Bibliotheken haben fast den gleichen Funktionsumfang. Der einzige Vergleich, den ich gefunden habe, ist eine etwas nicht schlüssige jsperf-Testseite.

Hat eine dieser Bibliotheken Vorteile gegenüber der anderen?

Paul
quelle
11
Ihre Erfahrung mit Pull-Anfragen ist wahrscheinlich ein guter Hinweis darauf, warum Select2 als Umschreiben und nicht als Gabel gestartet wurde. Mir ist auch aufgefallen, dass Select2 eine bessere (oder zumindest längere) Dokumentation hat.
Paul
1
Wenn es darauf ankommt oder aus Gründen des Unterschieds wird MIT ausgewählt, während Select2 Apache-lizenziert ist.
EGL 2-101
2
Um genau zu sein, ist Select2 unter der Apache-Lizenz oder der GPL v2 verfügbar. is licensed under the Apache License, Version 2.0 (the "Apache License") or the GNU General Public License version 2
Paul

Antworten:

92

Ab Select2 3.3.1 sind die folgenden Informationen in der Datei README.md dokumentiert

Was unterstützt Select2, was nicht?

  • Arbeiten mit großen Datasets: Bei Auswahl muss das gesamte Dataset als optionTags in das DOM geladen werden. Dies beschränkt sich auf die Arbeit mit kleinen Datasets. Select2 verwendet eine Funktion, um Ergebnisse im laufenden Betrieb zu finden, wodurch Ergebnisse teilweise geladen werden können.
  • Paging von Ergebnissen: Da Select2 mit großen Datenmengen arbeitet und nur eine kleine Anzahl übereinstimmender Ergebnisse gleichzeitig lädt, muss Paging unterstützt werden. Select2 ruft die Suchfunktion auf, wenn der Benutzer zum Ende der aktuell geladenen Ergebnismenge blättert und so das "unendliche Scrollen" der Ergebnisse ermöglicht.
  • Benutzerdefiniertes Markup für Ergebnisse: Ausgewählt unterstützt nur das Rendern von Textergebnissen, da dies das einzige Markup ist, das von optionTags unterstützt wird . Select2 bietet einen Erweiterungspunkt, mit dem jede Art von Markup zur Darstellung von Ergebnissen erstellt werden kann.
  • Möglichkeit, Ergebnisse im laufenden Betrieb hinzuzufügen: Select2 bietet die Möglichkeit, Ergebnisse aus dem vom Benutzer eingegebenen Suchbegriff hinzuzufügen, sodass dieser zum Markieren verwendet werden kann.
Herr 14
quelle
2
Wenn jemand an einer Funktion zum sofortigen Hinzufügen von Ergebnissen für Chosen gearbeitet hat: github.com/shezarkhani/chosen/tree/create_new_options Ich verwende eine Anpassung davon im ExpressionEngine-Add-On MX Select Plus (so ist es Ich bin hierher gekommen, da es jetzt ein konkurrierendes Add-On mit Select2 gibt.
Notacouch
Es sollte jedoch beachtet werden, dass Select2 keinen Fallback hat, wenn Javascript deaktiviert ist, da die Optionen über AJAX ausgefüllt werden.
Deathlock
10
Nichts, was Daten über AJAX abruft, funktioniert ohne Javascript. Select2 funktioniert gut mit vorab ausgefüllten Werten und muss AJAX nicht verwenden.
Zachzurn
@notacouch Was ist "Matrix Support" und "Low Variables Support" und "SafeCracker Support"? Sind diese Konzepte spezifisch für ExpressionEngine?
John Zabroski
@JohnZabroski Ja, es handelt sich um kommerzielle EE 2.x-Add-Ons (iirc SafeCracker wurde möglicherweise eingebaut).
Notacouch
40

IMHO Chosen wird "gepflegt", aber nicht "aktiv gepflegt". 341 Probleme und 51 Pull-Anfragen für Auserwählte. Select2 hat 128 Probleme und 25 Pull-Anfragen. Ich denke, das Muster für diese ist im Grunde

  • Wählen Sie aus, was für Sie oberflächlich ansprechender ist
  • Verwenden Sie es in ein oder zwei Apps
  • stoßen Sie auf Anpassungsprobleme oder -einschränkungen
  • Versuchen Sie vielleicht, über Probleme und Pull-Anfragen mit der Community zusammenzuarbeiten
  • Schließlich haben Sie es satt und bauen einfach Ihre eigenen mit dem, was Sie in diesem Prozess gelernt haben

Egal für welchen Sie sich entscheiden, wenn sich Ihr Anwendungsfall genau im Sweet Spot befindet, funktioniert einer von beiden. Wenn nicht, müssen Sie eventuell Ihre eigenen schreiben oder diese stark anpassen. In beiden Fällen ist die Wahl, welche spezifisch ist, nicht so wichtig. Ich denke, ich werde mich hier auf die Seite von @Andy Ray und @paul stellen, dass Select2 wahrscheinlich die bessere erste Wahl ist.

Peter Lyons
quelle
4
Meiner Ansicht nach bedeutet mehr Probleme, dass sich mehr Menschen darum kümmern und es nutzen. Und eine größere Community tendiert dazu, besseren Code zu produzieren (dies gilt nicht unbedingt für ausgewählte). AngularJS: 397 Ausgaben, 49 Pull-Anforderungen; joyent / node: 476 Ausgaben, 98 Pull Reqs. Ich frage mich, wie die Zahlen für Firefox, Linux-Kernel oder GCC lauten würden.
Paul
Ja, es ist nur eine Heuristik. Theoretisch sollte ein automatisch ausgewähltes Widget um mehrere Größenordnungen weniger komplex sein als so etwas wie joyent / node. Diese Dinge erweisen sich als sehr benutzerdefiniert, daher habe ich das Gefühl, dass Leute Pull-Anfragen einreichen, die ignoriert werden, und dann eine separate Gabel beibehalten oder neu schreiben. YMMV.
Peter Lyons
Nur eine Anmerkung, wenn Sie einen Anpassungsansatz verfolgen möchten: Ausgewählte haben eine wesentlich geringere Menge an Code (ungefähr 1/3), sind jedoch in CoffeeScript und SASS geschrieben (bevor sie in JS / CSS kompiliert werden). Wenn Sie bereits mit CoffeeScript vertraut sind, ist Ihre Wahl einfach: Die Auswahl ist einfacher zu verstehen und anzupassen.
Tim Dorr
@Peter Lyons Dies sind einige ziemlich bizarre Metriken, die verwendet werden, um Ihre Schlussfolgerung zu ziehen (nicht, dass ich mit Ihrer Schlussfolgerung nicht einverstanden bin). Schauen Sie sich die Anzahl der Mitwirkenden an (Select2 = 239 v. Chosen = 73), aber das könnte auch irreführend sein, mehr ist nicht immer besser. Der Puls und die Diagramme jedes GitHub-Projekts zeigen den Verlauf und die Häufigkeit des Commits zusammen mit einer Menge anderer nützlicher Statistiken an, um eine fundierte Entscheidung darüber zu treffen, welches Projekt "gepflegt" oder "aktiv entwickelt" werden kann.
cfx
FWIW, Chosen hat in den letzten Jahren viele Updates erhalten.
Charles Wood
21

Ein weiterer erwähnenswerter Unterschied ist, dass er Chosenin Sassund CoffeeScriptwährend Select2einfach CSSund entwickelt ist JS. Es ist meine persönliche Wahl , die Sassund CoffeeScriptnicht benötigten Schichten von Komplexität sind , die schwierig machen debuggen.

Nachdem ich beide ausprobiert habe, habe ich mich für beides entschieden. Der Versuch, die Select2Funktionalität zum Erstellen von <select>Elementen zu erhalten , stellt sich als sehr haarige Angelegenheit heraus, da man es einfach nicht tun kann, wenn man an Elementen hängt. Es fühlte sich einfach nicht gut durchdacht an, welche Reifen ich hätte durchspringen.

Ich habe mich für selectize.js entschieden, das nur das neue <option>...</option>Element zum DOM des Formulars hinzufügt - und das ist vernünftig. Es wird auch verwendet LESS- aber ich würde das umgehen und nur die CSSdirekt in Ihrem Projekt kompilierten anpassen.

Daniel Sokolowski
quelle
2
selectize.jsverbraucht weniger . Ist das weniger eine technologische Sackgasse als es Sassist?
Chris Wesseling
Nein, es befindet sich in derselben Domäne, aber von den drei selectize.js mussten die wenigsten Anpassungen vorgenommen werden, um zum Projekt zu passen.
Daniel Sokolowski
selectize hat visuelle Probleme mit Firefox 28.
MEM
@MEM könnten Sie genauer sein.
Daniel Sokolowski
In Firefox 28 (Mac OS X) sehen Sie unter jedem Eingabefeld einen zusätzlichen grauen "Rand oder Abstand oder Rand". Es ist wohl kein Effekt. Es muss eine visuelle Inkonsistenz sein. Es ist klar, wenn wir sie uns bei FF ansehen, und der gleiche Fehler tritt beispielsweise bei Chrome nicht auf.
MEM
18

selected.js vs select2.js

  • MIT-Lizenz für beide
  • Abhängigkeiten:
    • Select2: jQuery
    • Gewählt: tbc
  • Unterstützung für Desktop-Browser:
    • Select2: IE8 +
    • Ausgewählt: IE8 +
  • Geräteunterstützung:
    • Select2: unklar
    • Ausgewählt: Deaktiviert auf iPhone-, iPod Touch- und Android-Mobilgeräten
  • Gewicht (minimiert):
    • Select2: 57KB
    • Ausgewählt: 27KB
  • Verwendung: Select2 unterstützt eine "ausgefallenere" Benutzeroberfläche (siehe "Vorlagen").
  • Beide Code-Repos sind auf Github verfügbar
    • Select2: Beiträge: sehr aktiv
    • Ausgewählt: Beiträge: ca. 3x weniger als Select2

select2.js Beiträge selected.js Beiträge

ps. Ich werde versuchen, diese Antwort zu aktualisieren, wenn ich mehr über die fehlenden Punkte erfahre

Adrien Be
quelle
Select2 sollte mobile Geräte genauso unterstützen wie andere. Wir versuchen sicherzustellen, dass es mit allen beabsichtigten Funktionen auf allen Geräten genauso gut funktioniert.
Kevin Brown
1
Ich denke, der Hauptgrund, warum select2 aktiver ist, ist, dass sie an select2 4.x arbeiten, was ein wichtiger Umschreibvorgang ist. Ich verstehe ehrlich gesagt nicht, warum die Leute so viel Wert auf Beiträge legen. Ich wünschte, GitHub hätte ein kumulatives Flussdiagramm, das wichtige Dinge wie Codeabdeckung und Testfälle sowie die mittlere Antwortzeit für Probleme aufzeichnet! (Ich benutze übrigens select2, mein Punkt ist nur ein allgemeiner Ärger über Leute, die sich auf Beiträge und das Social Engineering konzentrieren, das durch die obigen Diagramme gefördert wird.)
John Zabroski
13

Lassen Sie mich zunächst sagen, dass Chosen und Select2 zwei großartige Plugins sind und dies meine persönliche Erfahrung mit Chosen ist. Alles, was sie sagen, ist wahr in Bezug auf Auserwählte.

Das Problem, auf das Pēteris Caune mit dem hingewiesen hat, selectist 2 Jahre alt und es gibt noch keine offizielle Lösung. Es gibt einfach keine gute Dokumentation für die API. Es wurde schon oft darauf hingewiesen (siehe Ausgabe 671), aber es gibt immer noch nichts. Sie haben fast 2 Jahre gebraucht , um dieses Problem zu lösen , bei dem die Auswahl im Grunde nicht funktioniert, wenn Sie das div overflow:hiddenvor dem Anzeigen versteckt haben (und Sie müssen eine witdh:X%Option verwenden, die Sie im Grunde nie erfahren würden, wenn Sie nicht nach dem Problem suchen).

Ich würde sagen, dass das Hauptproblem die Fixgeschwindigkeit ist, wie DelvarWorld in Ausgabe 92 sagte:

Meine Pull-Anfrage behebt dieses Problem, aber wie meine andere und viele der ausgewählten werden sie ignoriert. Dieses Projekt hat zu viele Mitwirkende mit einer zu kleinen Codebasis.

Ich habe zuerst Chosen für die MIT-Lizenz ausgewählt, aber ich hatte alle diese Probleme (Dropdown-Kürzung, nicht gefundene API, Suche nach Stunden für den versteckten Überlauf), also habe ich mich für select2 entschieden, weil es eine bessere Dokumentation hat, kein Dropdown-Cut-Fehler und schnellere Korrekturen.

zipp
quelle
Zu beachten ist, dass Select2 auch unter MIT lizenziert ist. github.com/select2/select2/blob/master/LICENSE.md
ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
Diese Antwort ist sehr alt und trifft möglicherweise nicht mehr zu. Ich werde es bearbeiten, wenn ich Zeit habe.
Zipp
9

Eine Funktion, die in Select2 funktioniert, in Chosen jedoch nicht, ist das selectinnere Element mit overflow: hiddenoder overflow: auto.

Geben Sie hier die Bildbeschreibung ein

Entsprechendes Problem für Ausgewählte: https://github.com/harvesthq/chosen/issues/86

Pēteris Caune
quelle
Ich konfrontiere das gleiche Problem mit Chosen.
devXen
1
Sie können tun .chosen-drop { z-index: 999999 !important;}, um das mit ausgewählten
Alireza Fattahi
6

Einige Unterschiede bei der Arbeit mit diesen beiden Plugins:

  • Mit select2 können Sie an einer beliebigen Stelle in der Option suchen. Wenn Sie beispielsweise eine Option namens ABCDEFG haben und CDE eingeben, wird diese Option in den Suchergebnissen angezeigt. Wenn Sie diese Option ausgewählt haben, müssen Sie AB .. usw. eingeben, um die Ergebnisse zu erhalten.

  • Ich habe festgestellt, dass bei größeren Datensätzen die Auswahl schneller zu sein scheint als select2, insbesondere im IE.

Reggaemahn
quelle
2
Ja, Ausgewählte scheinen nach Wörtern zu suchen. Wenn Sie Kingdomauf der Beispielseite tippen, wird dies zurückgegeben. United KingdomDies scheint eine sehr logische Methode zu sein $("#element").chosen({ search_contains: true });. Außerdem können Sie dies auch angeben .
Daniel Sokolowski
2
Ich stimme Ihnen zu und oft ist das der Fall, dh. Sie würden nach Worten suchen. Aber in vielen Fällen, in denen Sie Dinge in Klammern wie 'xyz (abc)' haben, wenn Sie 'abc' eingeben, suchen Sie auch nach 'xyz', das nicht zurückgegeben wird. Ich denke, es läuft auf das Szenario hinaus, in dem Sie es verwenden. In meiner Web-App habe ich beide verwendet, wo sie relevant waren. Ich mag es, ein bisschen mehr zu wählen, nur weil es eine überlegene Rendergeschwindigkeit im IE hat.
Reggaemahn
5

Select2 unterstützt Mobile, während Chosen sich speziell auf iPods, iPhones und mobilen Android- Geräten deaktiviert . Wenn Sie "erweiterte" Auswahlfelder auf Mobilgeräten verwenden möchten, erleichtert dies Ihre Auswahl.

danvk
quelle
@RezaRahmati Danke dafür. Hast du zufällig auch ein iPhone anprobiert? vesthq.github.io/chosen/#faqs sagt, dass "Chosen auf iPhone-, iPod Touch- und Android-Mobilgeräten deaktiviert ist". mehr auf github.com/harvesthq/chosen/pull/1388
Adrien Be
@adrienbe ja ich habe es auf Samsung Galaxy Tab und iPad getestet
Reza
@RezaRahmati was war das Ergebnis?
Adrien Be
@AdrienBe Es funktioniert, ich habe es in medicfa.com/Users/Create?reloadList=false verwendet öffnen Sie es mit dem Tablet und überprüfen Sie das Ergebnis
Reza
5

Meine Erfahrung mit Select2 war auf dem Desktop großartig, aber auf Touch-Mobilgeräten sehr unterschiedlich, wobei einige Macken immer vorhanden waren. Zum Beispiel schloss sich auf dem xperia st15i mit ics und dem Aktienbrowser das Dropdown-Menü immer selbst, weil die Tastatur den Fokus stahl. Die einzige Möglichkeit, es wieder zu öffnen, besteht darin, das Menü Dutzende Male zu berühren, eine Sekunde lang den Finger zu halten und andere Voodoo-Magie zu zeigen. Oder um mit der Eingabe zu beginnen, während die Dropdown-Liste geschlossen ist, und wie viele Benutzer werden dies herausfinden?

Selectize.js scheint viel flüssiger zu sein als Select2, hat aber auch Probleme auf Mobilgeräten, z. B. wenn der Wert ausgewählt oder eingegeben wird, wird die Seite aus irgendeinem Grund ganz nach links verschoben. Auf älteren Android 2.x-Geräten, die keinen Überlauf unterstützen, ist es unmöglich, über die wenigen Top-Optionen hinaus auszuwählen, da die Tastatur nicht angezeigt wird. :((

Ich muss Chosen noch testen und es ist vielleicht keine so schlechte Idee, für mobile Geräte deaktiviert zu werden, aber am Ende funktioniert gutes altes Dropdown immer und überall.

Update: Jetzt habe ich auch Chosen getestet und es ist in einem Bereich besser: Es funktioniert standardmäßig nicht auf Mobilgeräten (großartig!), Aber es gibt Probleme beim Filtern von Wörtern. Beispielsweise wird nicht in der Mitte der Wörter gesucht, und wenn Sie & nbsp hack für Aligments verwenden, werden auch vollständige Optionen ignoriert. Zurück zum Zeichenbrett.

dev101
quelle
Um die Suche in Ausgewählt richtig zu aktivieren, fügen Sie search_contains: trueIhre Optionen hinzu. Siehe crophq.github.io/chosen/options.html
Sicco
1

Warum ich select2 anstelle von Chosen gewählt habe

Das Hauptmerkmal von select2, das kein anderes Steuerelement automatisch hat, ist die Option "Alle löschen" mit dem 'x' auf der rechten Seite des Steuerelements. Dies ist eine Killer-Funktion für meine Anwendung. Ich weiß nicht, warum anderen Select-Tag-Erweiterungsbibliotheken diese Funktion fehlt.

John Zabroski
quelle
0

Select2 unterstützt AJAX Chosen Doesn't

Select 2 ist etwas schwerer als ausgewählt.

Ich bin zu Select2 gewechselt, weil keine offizielle Unterstützung für Ajax-Operationen vorhanden ist.

Yash
quelle