Difference between Chosen and Select2 in JavaScript

In this example, we will explain the Chosen and Select2 plug-in of JavaScript and highlights the key differences between both. Before we dwell on the topic, let us look at both the plug-ins.

Chosen: Chosen is a JavaScript plug-in for jQuery, Prototype, and Mootools that creates long and large user-friendly select boxes.

Key features of Chosen:

1. User Friendly: Instead of forcing your users to scroll through a giant list of items, they can just mark star to the name of the item they were looking for. The entries which do not match get removed from the view and an click “enter” or a mouse-click is enough to select choices.
2. Progressive Enhancement: Chosen removes the hassle of doing anything special to make it work for browsers without JavaScript, as Chosen replaces the normal HTML Select fields. There is no event to handle data at the back-end either.
3. Painless Setup: Chosen automatically respects opt-groups, selected state, the multiple attribute and browser tab order, just add Chosen files to your app and trigger the plugin.

Select2: Select2 is created to replace the standard select tag that is shown by the browsers. It supports every options and operations which are available in a standard select box, but with more flexibility. Some features of Select2 are:

• Customizable: It provides the user customizable select box along with support for searching, tagging, remote datasets, infinite scrolling and many other options.
• RTL Environments: It comes with support for RTL environments, searching over 40 languages built-in.
• Ajax: Using Ajax you can efficiently search large list of items.
• CSS: Fully skinnable, CSS built with Sass and an optional theme for Bootstrap 3.

Difference between Chosen and Select2:
Chosen and Select2 are two most popular libraries for extending select-boxes. Both are actively maintained, Chosen is older than Select2 and supports both jQuery and Prototype. Select2 supports only jQuery, Select2 is inspired by Chosen.

Chosen	Select2
Chosen needs the entire dataset to be loaded as option tags in the DOM, which limits it to working with kind of small datasets.	Select2 uses a function to find results dynamically, which allows it to partially load results.
Since Chosen needs the entire dataset to be loaded there is no need for paging.	As Select2 works with large datasets and only loads small amount of matching results it has to support paging. Select2 will call the search function when the user scrolls to the bottom of currently loaded result allowing to load more results.
Chosen only supports rendering text results because it is the only markup supported by the option tags.	Select2 provides an extension point which can be used to produce any kind of markup to represent results.
Chosen does not support the ability to add results dynamically.	Select2 provides the ability to add results from the search term entered by the user, which allows it to be used for tagging.
Chosen is developed in Sass and CoffeeScript.	Select2 is plain CSS and JS.
Size: 27KB	Size: 57KB
The select inside element that has overflow: hidden or overflow: auto; does not work in Chosen.	Select2 supports this feature.
In Chosen, if you have an option called GeeksForGeeks, you have to type Gee… and so on to get the results.	With Select2 you can start search at any location of the phrase. For example, you can type eek and you will get GeeksForGeeks option in the search result as it contains “eek”.

Notes: It has been found that Saas and CoffeeScript cause much more difficulty in the debugging process in Chosen.
Select2 supports mobile, whereas Chosen explicitly disables itself on mobile platforms. So it is advisable to use Select2 if you want to use “extended select-boxes” on mobile.