programing tip

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

itbloger 2020. 6. 8. 21:05
반응형

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


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

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

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

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

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


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

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

  • 큰 데이터 세트 작업 : Chosen에서는 전체 데이터 세트를 optionDOM에 태그 로로드해야하므로 작은 데이터 세트로 작업하는 것으로 제한됩니다. Select2는 함수를 사용하여 결과를 즉석에서 찾아 결과를 부분적으로로드 할 수 있습니다.
  • 결과 페이징 : Select2는 큰 데이터 세트에서 작동하며 페이징을 지원해야하는 한 번에 적은 양의 일치하는 결과 만로드합니다. 사용자가 현재로드 된 결과 세트의 맨 아래로 스크롤하면 결과의 '무한 스크롤'을 허용하는 Select2가 검색 기능을 호출합니다.
  • 결과에 대한 사용자 정의 마크 업 : 선택은 텍스트 결과 렌더링 만 지원 option합니다. 이는 태그가 지원하는 유일한 마크 업이기 때문입니다 . Select2는 결과를 나타내는 모든 종류의 마크 업을 생성하는 데 사용할 수있는 확장 점을 제공합니다.
  • 결과를 즉석에서 추가하는 기능 : Select2는 사용자가 입력 한 검색어의 결과를 추가하는 기능을 제공하여 태그 지정에 사용할 수 있습니다.

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

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

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


또 다른 차이점 가치에 대한 언급은입니다 Chosen에서 개발 Sass하고 CoffeeScript반면 Select2알기 CSSJS. 내 개인적인 옵션 Sass이며 CoffeeScript디버깅이 어려워지는 복잡성이 불필요합니다.

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

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


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 기여

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


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

The issue pointed by Pēteris Caune with the select is 2 years old and still there is no official fix. There is simply no good documentation for the API. It has been pointed out (watch issue 671) many time but there is still nothing. It took them almost 2 years to solve this issue where chosen would basically not work if you hid the div with overflow:hidden before showing it (and you have to use a witdh:X% option that you would basically never know if you don't look for the issue).

I'd say that the main problem is the fix speed like said DelvarWorld in issue 92:

My pull request fixes this issue, but like my other one and many of the ones for chosen they are being ignored. This project has too many contributors with too small of a code base.

I first picked Chosen for its MIT licence but I had all theses issues (dropdown cut, not finding the API, looking for hours for the overflow hidden), so I decided to switch to select2 because it has a better documentation, no dropdown cut bug and faster fixes.


One feature that works in Select2 but doesn't work in Chosen, is select inside element that has overflow: hidden or overflow: auto.

여기에 이미지 설명을 입력하십시오

Corresponding issue for Chosen: https://github.com/harvesthq/chosen/issues/86


Some differences I've found working with these two plugins:

  • With select2 you can search at any location in the option. For e.g. if you have an option called ABCDEFG and you type in CDE you will get that option in the search results but with chosen you have to type AB.. and so on to get the results.

  • I've found that with larger datasets, chosen seems to be faster than select2, especially in IE.


Select2 supports mobile, whereas Chosen specifically disables itself on iPods, iPhones and mobile Android. If you want to use "extended" select boxes on mobile, this makes your choice easy.


My experience with Select2 was great on desktop, but on touch mobile devices greatly varied, with some quirks always present. For example, on xperia st15i with ics and stock browser dropdown was always closing itself because of keyboard stealing focus. Only way to bring it open again is to touch the menu dozens of times, hold finger for a second and other voodoo magic. Or to start typing while the dropdown list is closed, and how many users will figure this out?

Selectize.js seems to be much smoother than Select2, but it also has issues on its own on mobile for e.g. when the value is selected or inputed it moves the page all the way to the left for some reason. Also, on older Android 2.x devices which do not support overflow, it is impossible to select past the few top options, since the keyboard does not pop-up. :(

Still have to test Chosen and it might be not such a bad idea to be disabled for mobile devices after all, but in the end good old dropdown works always and everywhere.

Update: now I have also tested Chosen as well, and it is better in one area: it does not work on mobile by default (great!), but it has filtering words issues. For example, does not search in the middle of the words, and if you use &nbsp hack for aligments, it will also ignore complete options. Back to drawing board.


Why I chose select2 over Chosen

The key feature select2 has, that no other control has auto-magically, is "Clear all" selections with the 'x' in the right-hand of the control. This is a killer feature for my application. I do not know why other select tag enhancement libraries lack this feature.


Select2 supports AJAX Chosen Doesn't

Select 2 is little heavier in size compare to chosen.

I switched to Select2 because no official support for ajax operations.

참고 URL : https://stackoverflow.com/questions/13575531/what-are-the-differences-between-chosen-and-select2

반응형