Mr Branding: jQuery Select Box Components

Thursday, February 4, 2016

jQuery Select Box Components – Chosen vs Select2

Have you ever worked on a project, and it seemed that something was off visually? Maybe the project was nearly finished, but some elements didn’t look so good? These may be small details, but they make a difference.

If your project contains unattractive select boxes and you want to add more features to them, you will find Chosen and Select2 very useful. These are two jQuery plugins that help style your select boxes to improve their look, customize their behavior and make them more user-friendly.

In this article, I will put these two plugins head-to-head, and compare their features and their use cases, so that you can make an informed choice as to which is best for you.

Installation

Both Chosen and Select2 are available via GitHub. This means you can clone the respective repository and obtain the files you need.


git clone http://ift.tt/1oaCH71
git clone http://ift.tt/1PlG6GW

Otherwise, you can install both plugins with Bower (which serves as an interface to GitHub). If Bower is your preferred route, you might as well grab jQuery while you’re at it.


bower install jquery
bower install select2
bower install chosen

Otherwise, grab the files from your CDN of choice (e.g. CDNJS) and include them in your page in the usual manner. This is what I have done in the templates below which you can use this to follow along with the examples in the tutorial.

Chosen

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Chosen/Select2 Template</title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
  </head>
  <body>

    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
    <script>// Additional logic goes here</script>
  </body>
</html>

Select2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Select2 Template</title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css">
  </head>
  <body>

    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
    <script>// Additional logic goes here</script>
  </body>
</html>

Are the Projects Actively Maintained?

As you can tell by visiting the its GitHub page, development of the Chosen plugin is not as active as it once was and the most recent version of Chosen dates from Febraury 6th 2014. This is not to say that the library has been abandoned — far from it! Rather the developers have got it to the place they want it to be and it remains a reliable and robust plugin.

Contrast that with Select2 on the other hand and the difference is noticeable. Development of this library is going full steam ahead and it recently released its official fourth version (4.0.0). This means that new features are being added, whilst others are being deprecated and/or removed.

Another useful metric might be the amount of questions with these tags on Stack Overflow. You can try this for yourself here: http://ift.tt/gE9fRX

If you type in “Select2” and then contrast that “Chosen”, you’ll see that there seems to be much more activity around the Select2 plugin. You’ll also see that it has a number of integrations, such as with AngularJS and Ruby on Rails.

Continue reading %jQuery Select Box Components – Chosen vs Select2%

by Taulant Spahiu via SitePoint

Mr Branding