What are the differences between Chosen and Select2?

Question

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 Pr

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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.

Answer 5

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.

Answer 6

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