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?
is licensed under the Apache License, Version 2.0 (the "Apache License") or the GNU General Public License version 2
Odpowiedzi:
Od Select2 3.3.1 poniżej znajduje się dokumentacja w pliku README.md
źródło
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
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.
źródło
Kolejną różnicą warto wspomnieć, że
Chosen
jest rozwijany wSass
aCoffeeScript
natomiastSelect2
jest prostyCSS
iJS
. To moja osobista opcja, któraSass
iCoffeeScript
są niepotrzebne warstwy złożoności, które utrudniają debugowanie.Po wypróbowaniu obu, zdecydowałem się nie używać żadnego - próba uzyskania
Select2
funkcji 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 skompilowanyCSS
bezpośrednio w twoim projekcie.źródło
selectize.js
zużywa mniej . Czy to mniej technologicznego ślepego zaułka niżSass
jest?selected.js vs select2.js
ps. Spróbuję zaktualizować tę odpowiedź, gdy dowiem się więcej o brakujących punktach
źródło
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
select
wynosi 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 divoverflow:hidden
przed 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:
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.
źródło
Jedną z funkcji, która działa w Select2, ale nie działa w Chosen, jest
select
element wewnętrzny, który maoverflow: hidden
luboverflow: auto
.Odpowiedni numer dla Chosen: https://github.com/harvesthq/chosen/issues/86
źródło
.chosen-drop { z-index: 999999 !important;}
naprawić z wybranymiNiektó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.
źródło
Kingdom
na ich przykładowej stronie zwróci,United Kingdom
co wydaje się bardzo logicznym sposobem zrobienia tego, a ponadto możesz to określić$("#element").chosen({ search_contains: true });
.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.
źródło
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.
źródło
search_contains: true
do swoich opcji. Zobacz: Harvesthq.github.io/chosen/options.htmlDlaczego 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.
źródło
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.
źródło