Chosen과 Select2의 차이점은 무엇입니까?

157

선택된 및 선택 2는 selectboxes을 확장하기위한 두 개의 인기 라이브러리입니다.

둘 다 적극적으로 관리되는 것 같습니다. Chosen은 더 오래되었으며 jQuery와 프로토 타입을 모두 지원합니다.

Select2는 jQuery 일 뿐이며, 문서에 따르면 Select2는 Chosen에서 영감을 받았지만 개선 사항 (있는 경우)이나 다른 이유는 자세히 설명하지 않습니다.

두 개의 라이브러리에는 거의 동일한 기능 세트가 있으며, 내가 찾은 유일한 비교는 다소 결정적인 jsperf 테스트 페이지입니다.

이 라이브러리 중 다른 라이브러리에 비해 어떤 장점이 있습니까?

javascript  jquery-chosen  jquery-select2 
— 폴
소스
11
풀 요청에 대한 경험은 아마도 Select2가 포크가 아닌 다시 쓰기로 시작한 이유에 대한 좋은 힌트 일 것입니다. 또한 Select2가 더 나은 (또는 적어도 더 긴) 문서를 가지고 있음을 알았습니다.
— Paul
1
중요한 점이나 차이점을 위해 Select는 MIT 인 반면, Select2는 Apache 라이센스입니다.
— EGL 2-101
2
정확하게 말하자면 Select2는 Apache 라이센스 또는 GPL v2에서 사용할 수 있습니다. is licensed under the Apache License, Version 2.0 (the "Apache License") or the GNU General Public License version 2
— Paul

답변:

92

Select2 3.3.1 현재 README.md에 문서화되어 있습니다.

선택된 2가 지원하지 않는 것은 무엇입니까?

  • 큰 데이터 세트 작업 : Chosen에서는 전체 데이터 세트를 optionDOM에 태그 로로드해야하므로 작은 데이터 세트로 작업하는 것으로 제한됩니다. Select2는 함수를 사용하여 결과를 즉석에서 찾아 결과를 부분적으로로드 할 수 있습니다.
  • 결과 페이징 : Select2는 큰 데이터 세트에서 작동하고 페이징을 지원해야하는 한 번에 적은 양의 일치하는 결과 만로드합니다. 사용자가 현재로드 된 결과 세트의 맨 아래로 스크롤하면 결과의 '무한 스크롤'을 허용하는 Select2가 검색 기능을 호출합니다.
  • 결과에 대한 사용자 정의 마크 업 : 선택은 텍스트 결과 렌더링 만 지원 option합니다. 이는 태그가 지원하는 유일한 마크 업이기 때문입니다 . Select2는 결과를 나타내는 모든 종류의 마크 업을 생성하는 데 사용할 수있는 확장 점을 제공합니다.
  • 결과를 즉석에서 추가하는 기능 : Select2는 사용자가 입력 한 검색어로 결과를 추가 할 수있는 기능을 제공하므로 태그 지정에 사용할 수 있습니다.
— 미스터 14
소스
2
FWIW 누군가가 선택된를위한 기능에 "즉시 추가 결과"에 대한 작업을했다 : github.com/shezarkhani/chosen/tree/create_new_options는 내가 추가에 ExpressionEngine에의 적응의 어떤 종류를 사용하고 MX 선택 플러스 (그것은 어떻게 Select2를 사용하여 경쟁하는 애드온이 있으므로 여기에 도착했습니다).
— notacouch
옵션은 AJAX를 통해 채워 지므로 Javascript가 비활성화되어 있으면 Select2에 폴 백이 없습니다.
— deathlock
10
AJAX를 통해 데이터를 가져 오는 것은 Javascript 없이는 작동하지 않습니다. Select2는 미리 채워진 값에서 잘 작동하며 AJAX를 사용할 필요가 없습니다.
— zachzurn
@notacouch "매트릭스 지원"및 "낮은 변수 지원"및 "SafeCracker 지원"이란 무엇입니까? 이러한 개념이 ExpressionEngine에만 해당됩니까?
— John Zabroski
@JohnZabroski 예, 상업용 EE 2.x 애드온입니다 (iirc SafeCracker가 내장되어있을 수 있음).
— notacouch
40

IMHO 선택은 "유지"되지만 "활성으로 유지"되지는 않습니다. 341 개의 이슈와 51 개의 풀 요청이 선택되었습니다. Select2에는 128 개의 이슈와 25 개의 풀 요청이 있습니다. 이것들의 패턴은 기본적으로

  • 어느 쪽이 당신에게 더 매력적인 지 골라주세요
  • 하나 또는 두 개의 앱에서 사용
  • 사용자 지정 문제 또는 제한 사항과 충돌
  • 문제 및 풀 요청을 통해 커뮤니티와 협력하려고 할 수 있습니다.
  • 결국이 과정에서 배운 것을 사용하여 자신을 구축하고 자신을 구축하십시오.

어느 것을 선택하든 유스 케이스가 정확히 스위트 스팟에 있으면 둘 중 하나가 작동합니다. 그렇지 않은 경우 결국 직접 작성하거나 크게 사용자 지정해야합니다. 어느 경우 에나, 어느 것을 선택하는 것이 특별히 중요하지는 않습니다. @Andy Ray 및 @paul과 함께 Select2가 더 나은 초기 선택이라고 생각합니다.

— 피터 리용
소스
4
내 생각에 더 많은 문제는 더 많은 사람들이 관심과 사용을 의미합니다. 그리고 더 큰 커뮤니티는 더 나은 코드를 생성하는 경향이 있습니다 (선택한 것에 적용 할 필요는 없습니다). AngularJS : 397 문제, 49 풀 요구; joyent / node : 476 이슈, 98 풀 요구 파이어 폭스, 리눅스 커널 또는 gcc의 숫자가 궁금합니다.
— Paul
네 휴리스틱 일뿐입니다. 이론적으로, 자동 선택 위젯은 joyent / node와 같은 것보다 몇 배나 더 복잡하지 않아야합니다. 이러한 것들이 매우 관습적인 것으로 판명되어 사람들이 풀 요청을 제출하고 있다는 것을 알게되어 무시하고 별도의 포크 또는 다시 쓰기를 유지합니다. YMMV.
— Peter Lyons
사용자 지정 접근 방식을 사용하려는 경우 참고 사항 : Chosen은 코드 양이 (약 1/3) 상당히 작지만 CoffeeScript 및 SASS (JS / CSS로 컴파일되기 전에)로 작성됩니다. CoffeeScript에 대해 잘 알고 있다면 선택이 간단합니다. 선택을 이해하고 사용자 정의하기가 더 쉬울 것입니다.
— Tim Dorr
@Peter Lyons 이것들은 당신의 결론을 이끌어내는 데 사용되는 아주 기괴한 척도입니다 (내 결론에 동의하지는 않습니다). 기고자 수 (Select2 = 239 v. Chosen = 73)를 살펴보면 오해의 소지가있을 수 있지만 항상 더 나은 것은 아닙니다. 각 GitHub 프로젝트의 펄스 및 그래프는 커밋 히스토리 및 빈도와 함께 다른 유용한 통계와 함께 어떤 프로젝트가 "유지"중인지 "진행중인 개발"에 대한 정보에 근거한 결정을 내립니다.
— cfx
FHOW, Chosen은 지난 몇 년 동안 많은 업데이트를 해왔습니다.
— Charles Wood
21

또 다른 차이점 가치에 대한 언급은입니다 Chosen에서 개발 Sass하고 CoffeeScript반면 Select2알기 CSS와 JS. 필자가 개인적으로 선택할 수 Sass있으며 CoffeeScript디버깅을 어렵게 만드는 불필요한 복잡성 계층입니다.

두 가지를 모두 시도한 후에도 둘 다 사용하지 않기로 결정했습니다. Select2항목에 기능을 만들 려고 하면 <select>요소에 첨부 할 때 단순히 할 수 없으므로 매우 털이 많은 것으로 밝혀졌습니다. 뛰어 넘다.

새 요소를 양식의 DOM에 추가하는 selectize.js 를 사용하여 정했습니다<option>...</option> . 또한 사용 LESS하지만-나는 그것을 우회하고 CSS프로젝트에서 직접 컴파일 된 것을 조정합니다 .

— 다니엘 소콜로프 스키
소스
2
selectize.js덜 사용합니다 . 그것은 기술적 인 막 다른 골목보다 적은가 Sass?
— Chris Wesseling
아니, 그것은 같은 도메인에 있지만 세 개의 selectize.js 중 프로젝트에 맞게 조정하는 것이 가장 필요했습니다.
— Daniel Sokolowski
selectize는 Firefox 28에서 시각적 인 문제가 있습니다.
— MEM
@MEM 더 자세하게 설명해 주시겠습니까?
— Daniel Sokolowski
Firefox 28 (Mac OS X)에서는 각 입력 필드 아래에 추가 회색 "여백 또는 패딩 또는 테두리"가 나타납니다. 내가 생각한 효과가 아닙니다. 시각적으로 일치하지 않아야합니다. FF에서 확인하면 분명하며 예를 들어 Chrome에서도 동일한 글리치가 발생하지 않습니다.
— MEM
18

chosen.js 및 select2.js

  • 두 가지 모두에 대한 MIT 라이센스
  • 종속성 :
    • Select2 : jQuery
    • 선택된 : tbc
  • 데스크탑 브라우저 지원 :
    • 선택 2 : IE8 +
    • 선택 : IE8 +
  • 장치 지원 :
    • 선택 2 : 불분명
    • 선택 : iPhone, iPod Touch 및 Android 모바일 장치에서 비활성화
  • 무게 (최소화) :
    • 선택 2 : 57KB
    • 선택 : 27KB
  • 사용법 : Select2는 더 많은 "팬시"UI를 지원합니다 ( '템플릿'참조)
  • 두 코드 저장소는 모두 Github에서 사용할 수 있습니다
    • Select2 : 기여 : 매우 활동적
    • 선택 : 기여 : Select2보다 약 3 배 적은

select2.js 기여 chosen.js 기여

추신. 누락 된 포인트에 대해 자세히 알면이 답변을 업데이트하려고합니다.

— 아드리안 베
소스
Select2 는 다른 장치와 동일한 방식으로 모바일 장치를 지원 해야 합니다. 우리는 모든 장치에서 의도 한 모든 기능과 함께 작동하도록 노력합니다.
— 케빈 브라운
1
select2가 더 활발한 주된 이유는 이들이 주요 재 작성 인 select2 4.x에서 작업하고 있기 때문입니다. 나는 사람들이 왜 기여를 강조하는지 이해하지 못한다. GitHub에 코드 적용 범위 및 테스트 사례와 같은 중요한 사항을 추적하고 문제에 대한 평균 응답 시간을 추적하는 누적 흐름도가 있었으면 좋겠습니다. (저는 select2, btw를 사용합니다. 제 요점은 위의 차트에서 권장하는 공헌과 사회 공학에 초점을 둔 사람들에 대한 일반적인 애완 동물입니다.)
— John Zabroski
13

먼저, Chosen과 Select2가 두 개의 훌륭한 플러그인이며 Chosen에 대한 제 개인적인 경험입니다. 그들이 선택한 모든 것은 선택에 관한 것입니다.

문제 으로 Pēteris Caune에 의해 지적은 select2 세이며, 아직 공식적인 수정이 없습니다. API에 대한 좋은 문서는 없습니다. 그것은 여러 번 지적되었지만 (시계 문제 671) 아직 아무것도 없습니다. 선택 하기 전에 div를 숨기면 선택한이 기본적으로 작동하지 않는 이 문제 를 해결하는 데 거의 2 년이 걸렸습니다 overflow:hidden(그리고 witdh:X%문제를 찾지 않으면 기본적으로 알 수없는 옵션 을 사용해야 함 ).

문제 92에서 DelvarWorld가 말한 것처럼 주요 문제는 수정 속도라고 말합니다.

내 풀 요청 이이 문제를 해결하지만 선택한 다른 하나 및 많은 것들과 마찬가지로 무시됩니다. 이 프로젝트에는 너무 작은 코드 기반을 가진 기고자가 너무 많습니다.

먼저 MIT 라이센스로 Chosen을 선택했지만 모든 문제 (드롭 다운 컷, API 찾기, 오버플로 숨겨진 시간 찾기)가 있었기 때문에 더 나은 문서가 있고 드롭 다운 컷 버그가 없으므로 select2로 전환하기로 결정했습니다. 더 빠른 수정.

— zipp
소스
Select2도 MIT에 따라 라이센스가 부여됩니다. github.com/select2/select2/blob/master/LICENSE.md
— ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
이 답변은 실제로 오래되어 더 이상 적용되지 않을 수 있습니다. 시간이되면 편집하겠습니다.
— zipp
6

이 두 가지 플러그인을 사용하여 발견 한 차이점은 다음과 같습니다.

  • select2를 사용하면 옵션의 모든 위치에서 검색 할 수 있습니다. 예를 들어 ABCDEFG라는 옵션이 있고 CDE를 입력하면 검색 결과에 해당 옵션이 표시되지만 선택하면 AB ..를 입력해야 결과를 얻을 수 있습니다.

  • 더 큰 데이터 세트의 경우 선택은 특히 IE에서 select2보다 빠르다는 것을 알았습니다.

— 레게 만
소스
2
예 Chosen은 단어를 검색 하는 것 같습니다. Kingdom예제 페이지에 입력 하면 반환 United Kingdom하는 논리적 인 방법과 함께 지정할 수도 있습니다 $("#element").chosen({ search_contains: true });.
— Daniel Sokolowski
2
나는 당신에 동의하며 종종 그렇습니다. 당신은 단어를 찾고있을 것입니다. 그러나 'abc'를 입력하면 'xyz (abc)'와 같이 대괄호로 묶인 항목이 많은 경우에는 반환되지 않는 'xyz'도 찾고 있습니다. 나는 그것이 당신이 그것을 사용하고있는 시나리오로 귀결된다고 생각합니다. 내 웹 응용 프로그램에서는 두 가지가 관련이있는 곳에서 모두 사용했습니다. IE의 렌더링 속도가 뛰어 나기 때문에 조금 더 선택하는 것이 좋습니다.
— reggaemahn
5

Select2는 모바일을 지원하지만 선택 은 iPod, iPhone 및 모바일 Android에서 자체적 으로 비활성화됩니다 . 모바일에서 "확장 된"선택 상자를 사용하려면 쉽게 선택할 수 있습니다.

— 단크
소스
@RezaRahmati thx입니다. 우연히도 iPhone을 사용해 보셨습니까? harvesthq.github.io/chosen/#faqs 는 "선택은 iPhone, iPod Touch 및 Android 모바일 장치에서 비활성화되어 있습니다"라고 말합니다. github.com/harvesthq/chosen/pull/1388
— Adrien Be
@adrienbe 네, 삼성 갤럭시 탭과 아이 패드에서 테스트했습니다
— Reza
@RezaRahmati 결과는 무엇입니까?
— Adrien Be
@AdrienBe 작동합니다. medicfa.com/Users/Create?reloadList=false 에서 사용했습니다 . 태블릿으로 열고 결과를 확인하십시오
— Reza
5

Select2에 대한 나의 경험은 데스크톱에서 훌륭했지만 터치 모바일 장치에서는 매우 다양하며 항상 기발한 부분이 있습니다. 예를 들어, xperia st15i에서 ics 및 스톡 브라우저 드롭 다운은 키보드 훔치기 초점으로 인해 항상 닫힙니다. 다시 열려면 메뉴를 수십 번 터치하고 두 번째 및 다른 부두 마법을 위해 손가락을 잡는 것입니다. 또는 드롭 다운 목록이 닫혀있는 동안 입력을 시작하려면 몇 명의 사용자가이를 알아낼까요?

Selectize.js는 Select2보다 훨씬 매끄러 워 보이지만 모바일에서도 자체적으로 문제가 있습니다. 예를 들어 값을 선택하거나 입력하면 어떤 이유로 든 페이지가 왼쪽으로 이동합니다. 또한 오버플로를 지원하지 않는 구형 Android 2.x 기기에서는 키보드가 팝업되지 않기 때문에 몇 가지 주요 옵션 중에서 선택할 수 없습니다. :(

여전히 선택된 것을 테스트해야하며 결국 모바일 장치에서 비활성화하는 것은 좋지 않은 아이디어 일 수는 없지만 결국 좋은 드롭 다운은 항상 어디서나 작동합니다.

업데이트 : 이제 Chosen도 테스트했으며 한 영역에서 더 좋습니다. 기본적으로 모바일에서는 작동하지 않지만 필터링 단어 문제가 있습니다. 예를 들어 단어 중간에 검색하지 않으며, & nbsp 해킹을 사용하면 전체 옵션도 무시됩니다. 드로잉 보드로 돌아갑니다.

— dev101
소스
선택에서 검색을 올바르게 활성화하려면 search_contains: true옵션에 추가 하십시오. 참조 harvesthq.github.io/chosen/options.html
— Sicco
1

내가 선택한 것보다 select2를 선택한 이유

select2의 핵심 기능은 다른 컨트롤에 자동으로 적용되지 않는 것입니다. 컨트롤 오른쪽에 'x'가있는 "모두 지우기"선택이 있습니다. 이것은 내 응용 프로그램의 킬러 기능입니다. 다른 선택 태그 향상 라이브러리에이 기능이없는 이유를 모르겠습니다.

— 존 자브로 스키
소스
0

Select2는 AJAX를 지원하지 않습니다.

선택 2는 선택에 비해 크기가 약간 무겁습니다.

아약스 작업에 대한 공식적인 지원이 없기 때문에 Select2로 전환했습니다.

— ash
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.