Using Selectize.js to Make Your Forms Better
Just about every web app uses forms. From the humble “log in” form to the online shopping checkout form, forms are absolutely crucial to our digital lives, both as developers and users. To that end, I began learning about Selectize.js, which is a jQuery UI plugin that allows you to quickly build clean looking, powerful forms.
From the Selectize.js documentation:
Selectize is an extensible jQuery-based custom <select> UI control. It's useful for tagging, contact lists, country selectors, and so on...FeaturesSkinnable — Comes with LESS stylesheets and shims for Bootstrap 2 and Bootstrap 3 (+ precompiled CSS).Clean API & Code + Extensible — Interface & make addons like a boss with the plugin system. Fully documented on GitHub & inline.Smart Ranking / Multi-Property Searching & Sorting — Want to search an item's title and description? No problem. You can even override the scoring function used for sorting if you want to get crazy. Uses sifter.js.Caret Between Items — Order matters sometimes. Use the left and right arrow keys to move between items.Select & Delete multiple items at once — Hold down option on Mac or ctrl on Windows to select more than one item to delete.RTL + Díåcritîçs supported — Great for international environments.Item Creation — Allow users to create items on the fly (and it's async friendly; the control locks until you invoke a callback).Remote Data Loading — For when you have thousands of options and want them provided by the server as the user types.
I’ll be walking you through building three of the most basic, but useful types of forms powered by Selectize.js.
First and foremost, in order to use Selectize you need to get jQuery, jQuery UI, and optionally, Bootstrap running in your application, along with Selectize itself.
For the purposes of this demonstration I used Node Package Manager (npm) to install jQuery, jQuery UI, and Selectize, and used a CDN for Bootstrap. There’s really no reason I chose to do it this way, so don’t worry about how you get these libraries, so long as you do.
Small note: Selectize comes with a default theme via jQuery UI, but if you have Bootstrap running on your project, Selectize also comes with pre-compiled Bootstrap themes that can be further customized, all of which can be found in its dist directory. Link to whatever works best for your project (I’m using one of the Bootstrap themes in this example).
Selectize works by attaching to input/select fields already defined in your HTML:
For the first mini-form, we’re going to use Selectize’s “tagging” feature, which allows users to type their own attributes and “tagifies” them in the browser before submission. An example of a similar feature can be seen below in this screenshot from Soundcloud’s upload form:
Selectize can attach itself to your form by selecting its elements with jQuery, and then running a special .selectize() function on that element. The selectize function accepts a callback function which contains the parameters you want Selectize to use to style what is displayed to the user as they fill in the form, as well as what gets submitted through to you.
The various key:value pairs inside of the callback function are parameters defined by Selectize.
In this example, we’re specifying that we want any tags created by the user to be submitted to our backend with commas between them via the delimiter key. persist:false tells Selectize to remove any references to tags a user fills in and then deletes before submitting the form (this is more important when we allow users to create entries for selections), while placeholder fills in placeholder text (this is overridden by any placeholder text hardcoded into the HTML). maxItems limits the number of tags a user can create in a single text field, while create specifies how Selectize will pass the users tags through to your backend via the “value” key, while the “text” key determines what will show up in the tag in the browser. In this case, it’s simply going to use the users’ input for both of these.
Selectize can also be used to create elegant dropdown selectors. Again, we’ll use the selectize function provided to us by Selectize.
In the above example, we’ve added two major sections to our callback function for .selectize(): options and optgroups, which are simply ways of declaring the <option> and <optgroup> elements for our selector via Selectize. However, unlike manually organizing this in the HTML, Selectize allows us to declare them separately, and link them together via an optgroupField key, whose value is a string which references one of the keys in our options objects. Selectize will then match the option object’s optgroupField with the actual optgroup object.
In this example, we’ve assigned the optgroupField to be “series”, which is a key in the various options objects. The “series” for Goku is “dbz” which matches with the “Dragon Ball Z’ object in our optgroups array. Our selector now knows to associate Goku with Dragon Ball Z, which can then be used to create headings inside our selection form.
Selectize forms that utilize dropdown menus or autofilling also require a “labelField”, which determines what gets displayed to the user in their dropdown or autofill.
Finally, we’ll make a form that allows users to begin typing the name of a tag they want to use into a text box which then recommends possible tags based on what they type, without allowing a user to create their own. In essence, this is a selector where the user uses a text box to select the tags they want rather than a dropdown menu.
This code is very similar to the previous example, except that since we’ve switched our HTML element from <select> to <input type=”text”>, we’re using more text based parameters rather than menu based.
We’re still using an options array, which will make up the list of tags that our form will recommend to users. We’ve also set create to false to forbid users from creating new tags. Setting openOnFocus stops our recommendations from appearing just because the user has clicked into our search box. I want to hide recommendations until a user starts typing. Lastly, we’re utilizing the searchField parameter now, which tells our form which attribute of our options objects it should look at to match the users text.
Selectize.js makes it incredibly easy to build powerful forms that look and feel incredibly “Web 2.0”. The examples in this post are really just the tip of the iceberg in terms of Selectize’s utility, as Selectize.js has built-in AJAX functionality, as well as the ability to completely customize the data that gets submitted to your backend, and a myriad of styling options for the forms themselves, dropdown menus, and returns.
Check out the documentation to get a full rundown of all of the parameters that can be used in your callback functions, and use the examples the Selectize team have provided to get a feel for how this code looks and works.
