What are the differences between Chosen and Select2?

Chosen and Select2 are the two more popular libraries for extending selectboxes.

Both seem to be actively maintained, Chosen is older and supports both jQuery and Prototype.

Select2 is jQuery only, its documentation says Select2 is inspired by Chosen, but doesn't detail any improvements made (if any) or other reasons for the rewrite.

Two libraries have pretty much same feature set, the only comparison I've found is a somewhat inconclusive jsperf test page.

Does any of these libraries have any advantages over the other?

As of Select2 3.3.1, below are what's documented in its README.md

> What Does Select2 Support That Chosen Does Not? > > * Working with large datasets: Chosen requires the entire dataset to be loaded as option tags in the DOM, which limits it to working with > small-ish datasets. Select2 uses a function to find results > on-the-fly, which allows it to partially load results. > * Paging of results: Since Select2 works with large datasets and only loads a small amount of matching results at a time it has to support > paging. Select2 will call the search function when the user scrolls to > the bottom of currently loaded result set allowing for the 'infinite > scrolling' of results. > * Custom markup for results: Chosen only supports rendering text results because that is the only markup supported by option tags. > Select2 provides an extension point which can be used to produce any > kind of markup to represent results. > * Ability to add results on the fly: Select2 provides the ability to add results from the search term entered by the user, which allows it > to be used for tagging.

IMHO Chosen is "maintained" but not "actively maintained". 341 issues and 51 pull requests for Chosen. Select2 has 128 issues and 25 pull requests. I think the pattern for these is basically

• pick whichever one is superficially more appealing to you
• use it in an app or two
• bump up against customization problems or limitations
• maybe try to work with the community via issues & pull requests
• eventually get fed up and just build your own using what you learned in this process

Whichever one you pick, if your use case is exactly in their sweet spot, either one will work. If not, you'll eventually have to write your own or heavily customize these. In either case, the choice of which one specifically isn't all that important. I guess I'll side with @Andy Ray and @paul here that Select2 is probably the better initial choice.

Another difference worth mentioning is that Chosen is developed in Sass and CoffeeScript whereas Select2 is plain CSS and JS. It is my personal option that Sass and CoffeeScript are unneeded layers of complexity which make debugging difficult.

After trying both I have decided to use neither - trying to get Select2 create item functionality turns out to be a very hairy affair as you simply can not do it when attached to <select> elements - it just didn't feel well thought out the hoops I would have to jump through.

I have settled on using selectize.js which just adds the new <option>...</option> element to the form's DOM - and that is sane. It does also use LESS - but I would bypass that and just tailor the compiled CSS directly in your project.

chosen.js vs select2.js

• MIT license for both
• Dependencies:
  • Select2: jQuery
  • Chosen: tbc
• Desktop browser support:
  • Select2: IE8+
  • Chosen: IE8+
• Device support:
  • Select2: unclear
  • Chosen: disabled on iPhone, iPod Touch, & Android mobile devices
• Weight (minified):
  • Select2: 57KB
  • Chosen: 27KB
• Usage: Select2 supports more "fancy" UI (see 'templates')
• Both code repos are available on Github
  • Select2: contributions: very active
  • Chosen: contributions: around 3x less than Select2

ps. I will try to update this answer when I find out more about the missing points

First, Let me tell you that Chosen and Select2 are two great plugin and this is my personal experience about Chosen. All what they are saying is true concerning 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   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.