Jakie są różnice między Chosen a Select2?

157

Chosen i Select2 to dwie bardziej popularne biblioteki do rozszerzania pól wyboru.

Oba wydają się być aktywnie utrzymywane, Chosen jest starszy i obsługuje zarówno jQuery, jak i Prototype.

Select2 to tylko jQuery, jego dokumentacja mówi, że Select2 jest inspirowana przez Chosen, ale nie wyszczególnia żadnych wprowadzonych ulepszeń (jeśli w ogóle) ani innych powodów przepisywania.

Dwie biblioteki mają prawie taki sam zestaw funkcji, jedyne porównanie, które znalazłem, to nieco niejednoznaczna strona testowa jsperf.

Czy którakolwiek z tych bibliotek ma przewagę nad innymi?

Paweł
źródło
11
Twoje doświadczenia z żądaniami ściągnięcia są prawdopodobnie dobrą wskazówką, dlaczego Select2 zaczął od przepisywania, a nie rozwidlenia. Zauważyłem też, że Select2 ma lepszą (lub przynajmniej dłuższą) dokumentację.
Paweł
1
Kiedy ma to znaczenie lub ze względu na różnicę, wybrany jest MIT, a Select2 jest licencjonowany na Apache.
EGL 2-101
2
Mówiąc dokładniej, Select2 jest dostępny na licencji Apache lub GPL v2. is licensed under the Apache License, Version 2.0 (the "Apache License") or the GNU General Public License version 2
Paul,

Odpowiedzi:

92

Od Select2 3.3.1 poniżej znajduje się dokumentacja w pliku README.md

Czego nie obsługuje Select2?

  • Praca z dużymi zbiorami danych: opcja Chosen wymaga załadowania całego zestawu danych jako optiontagów do DOM, co ogranicza go do pracy z małymi zestawami danych. Select2 używa funkcji do znajdowania wyników w locie, która pozwala na częściowe ładowanie wyników.
  • Stronicowanie wyników: Ponieważ Select2 działa z dużymi zbiorami danych i ładuje tylko niewielką liczbę pasujących wyników na raz, musi obsługiwać stronicowanie. Select2 wywoła funkcję wyszukiwania, gdy użytkownik przewinie na koniec aktualnie załadowanego zestawu wyników, umożliwiając „nieskończone przewijanie” wyników.
  • Niestandardowe znaczniki dla wyników: wybrana obsługuje tylko renderowanie wyników tekstowych, ponieważ jest to jedyny znacznik obsługiwany przez optiontagi. Select2 zapewnia punkt rozszerzenia, którego można użyć do tworzenia dowolnego rodzaju znaczników reprezentujących wyniki.
  • Możliwość dodawania wyników w locie: Select2 zapewnia możliwość dodawania wyników z wyszukiwanego hasła wprowadzonego przez użytkownika, co pozwala na użycie go do tagowania.
Pan 14
źródło
2
fwiw ktoś pracował nad funkcją "dodawania wyników w locie" dla Chosen: github.com/shezarkhani/chosen/tree/create_new_options Używam jakiejś adaptacji tego w dodatku ExpressionEngine MX Select Plus (tak Dostałem się tutaj, ponieważ jest teraz konkurencyjny dodatek korzystający z Select2).
notacouch
Należy jednak zauważyć, że Select2 nie ma rezerwy, gdy JavaScript jest wyłączony, ponieważ opcje są wypełniane przez AJAX.
Deathlock
10
Nic, co pobiera dane za pośrednictwem AJAX, nie będzie działać bez JavaScript. Select2 działa dobrze z wstępnie wypełnionymi wartościami i nie musi używać AJAX.
zachzurn
@notacouch Co to jest „Obsługa macierzy” i „Obsługa niskich zmiennych” i „Obsługa SafeCracker”? Czy te pojęcia są specyficzne dla ExpressionEngine?
John Zabroski
@JohnZabroski Tak, są to komercyjne dodatki EE 2.x (może być wbudowany iirc SafeCracker).
notacouch
40

IMHO Chosen jest „utrzymywany”, ale nie „aktywnie utrzymywany”. 341 problemów i 51 żądań ściągnięcia dla Chosen. Select2 ma 128 problemów i 25 żądań ściągnięcia. Myślę, że wzór na to jest w zasadzie

  • wybierz ten, który z pozoru bardziej ci się podoba
  • używać go w jednej lub dwóch aplikacjach
  • napotkać problemy lub ograniczenia związane z dostosowywaniem
  • może spróbować współpracować ze społecznością za pośrednictwem zgłoszeń problemów i żądań ściągnięcia
  • w końcu masz dość i po prostu zbuduj własne, korzystając z tego, czego nauczyłeś się w tym procesie

Niezależnie od tego, który wybierzesz, jeśli Twój przypadek użycia jest dokładnie w swoim najlepszym miejscu, każdy z nich zadziała. Jeśli nie, w końcu będziesz musiał napisać własne lub mocno je dostosować. W obu przypadkach wybór konkretnego z nich nie jest aż tak ważny. Myślę, że stanę po stronie @Andy Ray i @paul, że Select2 jest prawdopodobnie lepszym początkowym wyborem.

Peter Lyons
źródło
4
Moim zdaniem więcej problemów oznacza, że ​​więcej ludzi się opiekuje i używa. A większa społeczność ma tendencję do tworzenia lepszego kodu (nie dotyczy to wybranych). AngularJS: 397 problemów, 49 żądań pull; joyent / node: 476 problemów, 98 żądań pull. Zastanawiam się, jakie byłyby liczby dla Firefoksa, jądra Linuksa lub gcc.
Paul
Tak, to tylko heurystyka. W teorii widget autoselect powinien być o kilka rzędów wielkości mniejszy niż coś takiego jak joyent / node. Te rzeczy okazują się wysoce niestandardowe, więc mam wrażenie, że ludzie składają żądania ściągnięcia, które są ignorowane, a następnie utrzymują oddzielny fork lub przepisują. YMMV.
Peter Lyons
Uwaga, jeśli w planach jest podejście do dostosowywania: Chosen ma znacznie mniejszą ilość kodu (około 1/3), ale jest napisany w CoffeeScript i SASS (przed skompilowaniem do JS / CSS). Jeśli znasz już CoffeeScript, wybór jest prosty: wybrany będzie łatwiejszy do zrozumienia i dostosowania.
Tim Dorr,
@Peter Lyons Oto kilka dość dziwacznych wskaźników, które posłużyły do ​​wyciągnięcia wniosków (nie żebym się z nimi nie zgadzał). Przyjrzyj się liczbie współpracowników (Select2 = 239 v. Chosen = 73), ale to również może wprowadzać w błąd, ponieważ więcej nie zawsze jest lepsze. Pulse i wykresy każdego projektu GitHub wyświetlają historię i częstotliwość zatwierdzeń wraz z mnóstwem innych przydatnych statystyk, aby podjąć świadomą decyzję o tym, który projekt może być „utrzymywany”, a który „w trakcie aktywnego rozwoju”.
cfx
FWIW, Chosen otrzymał wiele aktualizacji w ciągu ostatnich kilku lat.
Charles Wood
21

Kolejną różnicą warto wspomnieć, że Chosenjest rozwijany w Sassa CoffeeScriptnatomiast Select2jest prosty CSSi JS. To moja osobista opcja, która Sassi CoffeeScriptsą niepotrzebne warstwy złożoności, które utrudniają debugowanie.

Po wypróbowaniu obu, zdecydowałem się nie używać żadnego - próba uzyskania Select2funkcji tworzenia przedmiotów okazuje się bardzo włochata, ponieważ po prostu nie możesz tego zrobić po przymocowaniu do <select>elementów - po prostu nie czułem się dobrze przemyślany, co bym miał przeskoczyć.

Zdecydowałem się na użycie selectize.js, który po prostu dodaje nowy <option>...</option>element do DOM formularza - i to jest rozsądne. Używa również LESS- ale ominąłbym to i po prostu dostosowałbym skompilowany CSSbezpośrednio w twoim projekcie.

Daniela Sokołowskiego
źródło
2
selectize.jszużywa mniej . Czy to mniej technologicznego ślepego zaułka niż Sassjest?
Chris Wesseling
Nie, jest w tej samej domenie, ale z trzech plików selectize.js wymagało najmniejszego dostosowania, aby pasowało do projektu.
Daniel Sokolowski
selectize ma problemy z grafiką w przeglądarce Firefox 28.
MEM
@MEM mógłbyś być bardziej szczegółowy.
Daniel Sokolowski
W przeglądarce Firefox 28 (Mac OS X) zauważysz dodatkowy szary „margines, dopełnienie lub obramowanie” poniżej każdego pola wejściowego. Przypuszczam, że to nie jest efekt. To musi być wizualna niespójność. Jest jasne, gdy spojrzymy na nie w FF, a ta sama usterka nie występuje na przykład w Chrome.
MEM
18

selected.js vs select2.js

  • Licencja MIT dla obu
  • Zależności:
    • Select2: jQuery
    • Wybrane: tbc
  • Obsługa przeglądarek na komputery stacjonarne:
    • Wybierz 2: IE8 +
    • Wybrano: IE8 +
  • Obsługa urządzeń:
    • Select2: niejasne
    • Wybrano: wyłączone na urządzeniach mobilnych iPhone, iPod Touch i Android
  • Waga (zminimalizowana):
    • Wybierz2: 57KB
    • Wybrane: 27 KB
  • Zastosowanie: Select2 obsługuje bardziej „fantazyjny” interfejs użytkownika (patrz „szablony”)
  • Oba repozytoria kodu są dostępne na Github
    • Select2: wkłady: bardzo aktywny
    • Wybrano: wkład: około 3x mniej niż Select2

wkład select2.js. wkłady selected.js.

ps. Spróbuję zaktualizować tę odpowiedź, gdy dowiem się więcej o brakujących punktach

Adrien Be
źródło
Select2 powinien obsługiwać urządzenia mobilne w taki sam sposób, jak inne. Staramy się, aby działał równie dobrze, z wszystkimi zamierzonymi funkcjami, na wszystkich urządzeniach.
Kevin Brown
1
Myślę, że głównym powodem, dla którego select2 jest bardziej aktywny, jest to, że pracują nad select2 4.x, co jest dużym przepisem. Naprawdę nie rozumiem, dlaczego ludzie kładą tak duży nacisk na wkład. Chciałbym, żeby GitHub miał skumulowany diagram przepływu, który śledzi ważne rzeczy, takie jak pokrycie kodu i przypadki testowe, a także średni czas odpowiedzi na problemy! (Używam select2, przy okazji, chodzi mi tylko o ogólne irytowanie ludzi skupiających się na wkładzie i inżynierii społecznej, do której zachęcają powyższe wykresy.)
John Zabroski
13

Po pierwsze, powiem ci, że Chosen i Select2 to dwie świetne wtyczki i to jest moje osobiste doświadczenie z Chosen. Wszystko, co mówią, dotyczy Wybranych.

Problem wskazał Pēteris Caune z selectwynosi 2 lata i nadal nie ma oficjalnej poprawki. Po prostu nie ma dobrej dokumentacji API. Wielokrotnie wskazywano na to (zegarek nr 671), ale nadal nic nie ma. Zajęło im to prawie 2 lata, aby rozwiązać ten problem, w którym wybrana opcja w zasadzie nie zadziała, jeśli ukryjesz element div overflow:hiddenprzed wyświetleniem (i musisz użyć witdh:X%opcji, której w zasadzie nigdy byś nie wiedział, gdybyś nie szukał problemu).

Powiedziałbym, że głównym problemem jest szybkość naprawy, jak powiedział DelvarWorld w numerze 92:

Moja prośba o ściągnięcie rozwiązuje ten problem, ale podobnie jak moja druga i wiele z wybranych, są ignorowane. Ten projekt ma zbyt wielu współautorów ze zbyt małą bazą kodu.

Najpierw wybrałem Chosen ze względu na licencję MIT, ale miałem wszystkie te problemy (cięcie listy rozwijanej, nie znajdowanie interfejsu API, szukanie godzin ukrytego przepełnienia), więc zdecydowałem się przełączyć na select2, ponieważ ma lepszą dokumentację, brak błędu po usunięciu listy rozwijanej i szybsze poprawki.

Zipp
źródło
Warto zauważyć, że Select2 jest również objęty licencją MIT. github.com/select2/select2/blob/master/LICENSE.md
ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
Ta odpowiedź jest naprawdę stara i może już nie mieć zastosowania. Zmienię to, kiedy będę miał czas.
zipp
9

Jedną z funkcji, która działa w Select2, ale nie działa w Chosen, jest selectelement wewnętrzny, który ma overflow: hiddenlub overflow: auto.

wprowadź opis obrazu tutaj

Odpowiedni numer dla Chosen: https://github.com/harvesthq/chosen/issues/86

Pēteris Caune
źródło
Mam ten sam problem z Chosen.
devXen
1
Możesz to .chosen-drop { z-index: 999999 !important;}naprawić z wybranymi
Alireza Fattahi,
6

Niektóre różnice, które znalazłem podczas pracy z tymi dwoma wtyczkami:

  • Dzięki select2 możesz wyszukiwać w dowolnym miejscu w opcji. Na przykład, jeśli masz opcję ABCDEFG i wpiszesz CDE, otrzymasz tę opcję w wynikach wyszukiwania, ale po wybraniu musisz wpisać AB ... i tak dalej, aby otrzymać wyniki.

  • Zauważyłem, że przy większych zestawach danych wybrany wydaje się być szybszy niż select2, szczególnie w IE.

reggaemahn
źródło
2
Tak, Chosen wydaje się wyszukiwać na słowach, to znaczy wpisanie Kingdomna ich przykładowej stronie zwróci, United Kingdomco wydaje się bardzo logicznym sposobem zrobienia tego, a ponadto możesz to określić $("#element").chosen({ search_contains: true });.
Daniel Sokolowski
2
Zgadzam się z tobą i często tak jest, tj. szukałbyś słów. Ale w wielu przypadkach, gdy masz rzeczy w nawiasach, takie jak „xyz (abc)”, jeśli wpiszesz „abc”, szukasz również „xyz”, które nie zostanie zwrócone. Wydaje mi się, że sprowadza się to do scenariusza, w którym go używasz. W mojej aplikacji internetowej użyłem obu tych, które były istotne. Podoba mi się nieco bardziej tylko ze względu na doskonałą prędkość renderowania w IE.
reggaemahn
5

Select2 obsługuje urządzenia mobilne, podczas gdy Chosen wyłącza się specjalnie na iPody, iPhone'y i mobilne urządzenia z systemem Android. Jeśli chcesz korzystać z „rozszerzonych” pól wyboru na urządzeniach mobilnych, ułatwi to wybór.

danvk
źródło
@RezaRahmati thx za to. Czy próbowałeś też przez przypadek iPhone'a? Harvesthq.github.io/chosen/#faqs mówi: „Wybrany jest wyłączony na urządzeniach mobilnych iPhone, iPod Touch i Android”. więcej na github.com/harvesthq/chosen/pull/1388
Adrien Be
@adrienbe tak, przetestowałem to na Samsung Galaxy Tab i iPadzie
Reza
@RezaRahmati jaki był wynik?
Adrien Be
@AdrienBe Działa, użyłem go w medicfa.com/Users/Create?reloadList=false otwórz tabletem i sprawdź wynik
Reza
5

Moje doświadczenie z Select2 było świetne na komputerze stacjonarnym, ale na dotykowych urządzeniach mobilnych było bardzo zróżnicowane, z pewnymi dziwactwami zawsze obecnymi. Na przykład na Xperii st15i z listą rozwijaną ics i przeglądarki akcji zawsze zamykała się z powodu kradzieży klawiatury. Jedynym sposobem, aby go ponownie otworzyć, jest dotknięcie menu kilkadziesiąt razy, przytrzymanie palca przez sekundę i inna magia voodoo. Lub zacząć pisać, gdy lista rozwijana jest zamknięta i ilu użytkowników to zrozumie?

Selectize.js wydaje się być dużo bardziej płynny niż Select2, ale sam ma problemy na urządzeniach mobilnych, np. Gdy wartość jest wybrana lub wprowadzona, przesuwa stronę całkowicie w lewo z jakiegoś powodu. Ponadto na starszych urządzeniach z Androidem 2.x, które nie obsługują przepełnienia, nie można wybrać opcji poza kilkoma górnymi opcjami, ponieważ klawiatura nie wyskakuje. :(

Nadal muszę przetestować Chosen i może wcale nie być taki zły pomysł, aby wyłączyć urządzenia mobilne, ale ostatecznie dobre, stare menu działa zawsze i wszędzie.

Aktualizacja: teraz przetestowałem również Chosen i jest lepszy w jednym obszarze: domyślnie nie działa na urządzeniach mobilnych (świetnie!), Ale ma problemy z filtrowaniem słów. Na przykład nie wyszukuje w środku słów, a jeśli użyjesz & nbsp hack dla dopasowań, zignoruje również pełne opcje. Wróć do deski kreślarskiej.

dev101
źródło
Aby poprawnie włączyć wyszukiwanie w Wybranych, dodaj search_contains: truedo swoich opcji. Zobacz: Harvesthq.github.io/chosen/options.html
Sicco
1

Dlaczego wybrałem select2 zamiast Chosen

Kluczową cechą select2, której żadna inna kontrolka nie posiada auto-magii, jest "Wyczyść wszystko" wybory z „x” po prawej stronie kontrolki. To zabójcza funkcja dla mojej aplikacji. Nie wiem, dlaczego inne wybrane biblioteki rozszerzeń tagów nie mają tej funkcji.

John Zabroski
źródło
0

Select2 obsługuje AJAX Wybrane nie

Select 2 jest nieco cięższy w porównaniu do wybranych.

Przerzuciłem się na Select2, ponieważ nie ma oficjalnej obsługi operacji Ajax.

Yash
źródło