Select3 – Modular and light-weight selection library for jQuery and Zepto.js
- Rich UI. Select boxes made by Select3 have rich functionality, work out of the box and are customizable.
- Modular. Select3’s modular approach is aimed to make it easy to create custom builds with just the features that you care about and to easily swap modules for custom ones.
- Light-weight. Select3 is smaller than comparable selection libraries, even if you’re using the “full” build with all features packed in.
- Compatibility. Select3 can be used with both jQuery and Zepto.js and is compatible with jQuery builds without Sizzle.
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 use FontAwesome 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 😉
- 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.
In addition, the default templates assume that you have included FontAwesome in your page to display the icons.
$(selector).select3(options) to initialize a Select3 instance on the element specified by the given selector. The following options are supported:
||If set to
||Function to create a new item from a user’s search term. This is used to turn the term into an item when dropdowns are disabled and the user presses Enter. It is also used by the default tokenizer to create items for individual tokens. The function receives a
||Initial selection data to set. This should be an object with
||Custom dropdown implementation to use for this instance|
||Optional CSS class to add to the top-level dropdown element.|
||Function to map values by ID to selection data. This function receives two arguments,
||The input type to use. Default input types include ‘Multiple’, ‘Single’ and ‘Email’, but you can add custom input types to the
||Array of items from which to select. Should be an array of objects with
||Function to determine whether text matches a given search term. Note this function is only used if you have specified an array of items. Receives two arguments:
||Placeholder text to display when the element has no focus and selected items.|
||Function to position the dropdown. Receives
||Function to use for querying items. Receives a single object as argument with the
||Placeholder text to display in the search input in the dropdown.|
||The Select3 Dropdown by default suppresses mousewheel events so that any scrolling in the dropdown doesn’t affect the scroll position of the page. Through this option you can select which selector should be monited for scroll events to suppress. Set it to
||Object with instance-specific templates to override the global templates assigned to
||Function for tokenizing search terms. Will receive the
||Array of string separators which are used to separate the search term into tokens. If specified and the tokenizer property is not set, the tokenizer property will be set to a function which splits the search term into tokens separated by any of the given separators. The tokens will be converted into selectable items using the
||Initial value to set. This should be an ID (string or number) in the case of input type ‘Single’, or array of IDs otherwise. This property is mutually exclusive with
For documentation about all the available methods once Select3 has been instantiated, I refer to the inline documentation in the source files for now.
All of these events are emitted on the element to which the Select3 instance is attached and can be listened to using jQuery’s
||Emitted when the selection has been changed. Additional properties on the event object:
||Emitted when the dropdown is closed.|
||Emitted when an item in the dropdown is highlighted. Additional properties on the event object:
||Emitted when the dropdown is opened.|
||Emitted when the dropdown is about to be opened. You can call
||Emitted when an item has been selected. Additional properties on the event object:
||Emitted when an item is about to be selected. You can call
Before you decide to migrate from Select2 to Select3, you should consider that not every feature supported by Select2 is supported by Select3. So check beforehand whether Select3 actually meets your requirements.
The following is an (incomplete) list of features which Select3 currently lacks:
- Reordering of selected items. Select2 allows reordering of selected items, for example through drag ‘n drop. Select3 doesn’t and there are curently no plans to implement this.
- AJAX. Select2 has a built-in AJAX query function that makes it easier to perform AJAX requests for fetching requests. This is a convenience feature as you can achieve the same result by calling
$.ajax()in the query function, but it is one Select3 currently lacks.
- Formatting functions. Select2 allows you to specify a wide range of
format*()functions in the options. With Select3, it is hoped you won’t have much need for these as Select3 allows for much easier customization of templates. However, practice will have to show if some of these are still desired.
- Options. Select3 lacks some miscellaneous options supported by Select2. Notable omissions are
- Events. Select2 currently emits more events than Select3 does. Notable omissions are ‘select2-clearing’, ‘select2-focus’ and ‘select2-blur’ among others.
- With Select2, you can take a <select> or <input> element in the DOM and initialize your Select2 instance based on that. Instead, to position a Select3 instance in the DOM you attach it to an empty <div> element and all options you want pass to Select3 are specified through the constructor method. An additional module is planned for Select3 that will simulate the Select2 approach, but this is not a high priority right now.
- Select2 has explicit support for tags through the
tagsoption. With Select3, tagging is also supported, but works through the regular
- If you have customized the CSS you use with Select2, you will have to take into account that you may need to customize it again for Select3 as the templates are very different.
- Some properties are named differently, even though they have very similar meaning. Examples:
choiceparameter to events is now called