Select3

Modular and light-weight selection library for jQuery and Zepto.js.

Motivation

I’ve used Select2 for a long time because I reckon it is the best and most feature-rich selection library out there.

However, time and again I’ve ran into its limitations. It is difficult to customize the styling, and introducing subtle tweaks to its behavior typically meant maintaining a private fork. More specifically, I wanted to make the following changes:

Use custom templates, instead of the ones that are hard-coded in Select2. This would also open up the possibility of not loading the image sprite included with Select2, but instead useFontAwesome icons that I already use in my projects.
Use custom loading indicators, instead of the spinner GIF included by Select2.
I wanted to make it easier to support a use case where Select2 is used without any selection dropdown, but with the proper tokenization.
Make Select2 work with jQuery builds without Sizzle for better performance. Patches for this have been accepted in Select2, but unfortunately it’s a moving target causing repeated breakage. Also, once Sizzle is no longer required, it becomes much easier to support Zepto.js.
Personally, I preferred a more modern codebase to work with, rather than the huge monolithic library that is Select2. This also includes proper documentation of the code as well as good test coverage. At this point also support for any IE version older than 10 can be dropped.

Having said that, if you’re a user of Select2 and don’t recognize yourself in any of these issues, I advise you to keep using Select2. It’s feature-rich and actively supported, so don’t fix what ain’t broken

Setup

Select3 only relies on jQuery or Zepto.js being loaded on the page to work.

In addition, the default templates assume that you have included FontAwesome in your page to display the icons.

Manual

Copy select3-full.js and select3-full.css from the dist/ directory into your project. Then put the following in your HTML head:

<head>
    ...
    <link href="font-awesome.css" rel="stylesheet">
    <link href="select3-full.css" rel="stylesheet">
    ...
    <script src="jquery.js"></script>
    <script src="select3-full.js"></script>
    ...
</head>

Verify the paths are correct for your particular project. The important thing is that jQuery (or Zepto.js) should be loaded before including Select3.

Using Bower

Make sure Bower is installed, then run:

$ bower install select3

Using Component

Include as a component(1) dependency.

In your component.json:

{
    "dependencies": {
        ...
        "arendjr/select3": "^1.0.0"
        ...
    }
}

And in your code:

var $ = require('jquery');
require('select3');

Browser Support

Chrome
Firefox
Internet Explorer 10+
Safari 6+

Note that while Internet Explorer versions older than 10 are not supported, you might be able to get them to work, possibly with the use of some polyfills. Reports of success or patches to create a “legacy” build would be welcomed

Ads

Thursday, 12 March 2015

Select3 – Modular and Lightweight Selection Library for jQuery