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

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?

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.

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.

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.

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

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

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.

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.

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

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.

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.

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.

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.

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.