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 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?

Bootlace

Your experience with pull requests is probably a good hint on why Select2 started as a rewrite, not a fork. I also noticed that Select2 has better (or at least longer) documentation. – Bootlace

When it matters or for the sake of difference Chosen is MIT while Select2 is Apache licensed. – Avrilavrit

To be precise, Select2 is available under Apache license or GPL v2. is licensed under the Apache License, Version 2.0 (the "Apache License") or the GNU General Public License version 2 – Bootlace

Answer 1

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.

Rothwell

fwiw someone did work on an "add results on the fly" feature for Chosen: github.com/shezarkhani/chosen/tree/create_new_options I am using some kind of adaptation of it in the ExpressionEngine add-on MX Select Plus (it is how I got here as there is now a competing add-on using Select2). – Beautician

It should be noted though that Select2 doesn't have a fallback when Javascript is disabled, since the options are populated via AJAX. – Chambermaid

Nothing that pulls data via AJAX will work without Javascript. Select2 works fine with pre-populated values and doesn't have to use AJAX. – Bistro

@Beautician What is "Matrix Support" and "Low Variables Support" and "SafeCracker support"? Are these concepts specific to ExpressionEngine? – Qianaqibla

@JohnZabroski Yes, they're commercial EE 2.x add-ons (iirc SafeCracker may have been built in). – Beautician

Answer 2

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.

Microgram

In my view more issues means more people care and use. And bigger community tends to produce better code (this doesn't necessary apply to chosen). AngularJS: 397 issues, 49 pull reqs; joyent/node: 476 issues, 98 pull reqs. I wonder what the numbers would be for firefox, linux kernel or gcc. – Bootlace

Yeah it's just a heuristic. In theory, an autoselect widget should be several orders of magnitude lower complexity than something like joyent/node. These things turn out to be highly custom, so I get the sense that people are filing pull requests, which get ignored, and then they go maintain a separate fork or rewrite. YMMV. – Microgram

Just a note if your plans are to go with a customization approach: Chosen has a significantly smaller amount of code (about 1/3rd), but is written in CoffeeScript and SASS (before being compiled to JS/CSS). If you're already familiar with CoffeeScript, then your choice is simple: Chosen will be easier to comprehend and customize. – Eboh

@Peter Lyons These are some pretty bizarre metrics used to draw your conclusion (not that I disagree with your conclusion). Take a look at the number of contributors (Select2 = 239 v. Chosen = 73) but that might also be misleading, more isn't always better. The Pulse and Graphs of each GitHub project display commit history and frequency along with a ton of other useful stats to make an informed decision about which project may "maintained" vs. "undergoing active development." – Backstage

FWIW, Chosen has had a lot of updates in the past couple of years. – Prolix

Answer 3

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.

Amidst

selectize.js uses less. Is that less of a technological dead end than Sass is? – Docile

Nope, it's in the same domain but out of the three selectize.js needed the least tweaking to fit the project. – Amidst

selectize has visual issues on Firefox 28. – Dearman

@Dearman could you be more specific. – Amidst

In Firefox 28 (Mac OS X), you will notice an extra gray "margin or padding or border" below each input field. It's not an effect I suppose. It must be a visual inconsistency. It's clear once we look at them on FF, and the same glitch doesn't occur on Chrome for example. – Dearman

The live examples at brianreavis.github.io/selectize.js don't have that issue in Firefox 28. Taking a guess here but I would inspect (in Firefox) your site's styles and also parse your CSS files through a validator to ensure there are no markup issues - home that helps. – Amidst

A agree that selectize is the best of the three, but whether a project's source files are in coffeescript, sass, less, etc should have little bearing on the decision to chose such a project. Heck, at least you're guaranteed that the resulting/compiled javascript and css will have perfect syntax and avoid common pitfalls that arise when writing js or css directly. – Blab

Answer 4

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

Sail

Select2 should support mobile devices the same way as others. We try to make sure it works just as well, with all the intended functionality, on all devices. – Disdainful

I think the main reason select2 is more active is that they are working on select2 4.x, which is a major re-write. I honestly don't understand why people place so much emphasis on contributions. I wish GitHub had a cumulative flow diagram that tracked important things like code coverage and test cases, as well as mean response time for issues! (I use select2, btw, my point is just a general pet peeve about people focusing on contributions and the social engineering that is encouraged by charts above.) – Qianaqibla

Answer 5

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.

Gamal

Just to note Select2 is also licensed under MIT. github.com/select2/select2/blob/master/LICENSE.md – Mathis

This answer is really old and might not apply anymore. I will edit it when I get time. – Gamal

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

Classieclassification

I am confronting the same issue with Chosen. – Beacon

You can do .chosen-drop { z-index: 999999 !important;} to fix that with chosen – Wagon

Answer 7

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.

Whimsey

Yes Chosen seems to search on words, that is typing Kingdom on their example page will return United Kingdom which seems a very logical way of doing it plus you can specify also $("#element").chosen({ search_contains: true });. – Amidst

I do agree with you and often that is the case ie. you'd be looking for words. But in many instances where you have things in brackets like 'xyz(abc)' if you type 'abc' you are also looking for 'xyz' which won't be returned. I guess, it boils down to the scenario you are using it in. In my web app I've used both of these where they were relevant. I like chosen a bit more only because of it's superior rendering speed in IE. – Whimsey

Answer 8

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.

Oculist

@RezaRahmati thx for that. Did you try on an iPhone too by any chance? harvesthq.github.io/chosen/#faqs says "Chosen is disabled on iPhone, iPod Touch, and Android mobile devices". more on github.com/harvesthq/chosen/pull/1388 – Sail

@adrienbe yes I have tested it on Samsung galaxy tab and iPad – Propst

@RezaRahmati what was the outcome? – Sail

@AdrienBe It works, I have used it in medicfa.com/Users/Create?reloadList=false open it with the tablet and check the result – Propst

Answer 9

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.

Anthiathia

To properly enable search in Chosen add search_contains: true to your options. See harvesthq.github.io/chosen/options.html – Trunk

Answer 10

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.

Qianaqibla

Answer 11

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.

Colure