Selectize.JS – jQuery based hybrid of a textbox and box for tagging purpose with autocomplete and native-feeling keyboard navigation

January 12, 2016

280

Selectize.JS – jQuery based hybrid of a textbox and <select> box for tagging purpose with autocomplete and native-feeling keyboard navigation

Selectize is the hybrid of a textbox and <select> box. It’s jQuery-based and it’s useful for tagging, contact lists, country selectors, and so on

It clocks in at around ~7kb (gzipped). The goal is to provide a solid & usable user-experience with a clean and powerful API.

It’s a lot like Chosen, Select2, and Tags Input but with a few advantages. Developed by @brianreavis (partly at DIY). Licensed under the Apache License, Version 2.0… so do whatever you want with it!

Features

Smart Option Searching / Ranking
Options are efficiently scored and sorted on-the-fly (using sifter). Want to search an item’s title and description? No problem.
Caret between items
Order matters sometimes. Use the ← and → arrow keys to move between selected items.
Select & delete multiple items at once
Hold down option on Mac or ctrl on Windows to select more than one item to delete.
Díåcritîçs supported
Great for international environments.
Item creation
Allow users to create items on the fly (async saving is supported; the control locks until the callback is fired).
Remote data loading
For when you have thousands of options and want them provided by the server as the user types.
Clean API & code
Interface with it and make modifications easily. Pull requests welcome!
Extensible
Plugin API for developing custom features (uses microplugin).
Touch Support
Plays nice with iOS 5+ devices.

Selectize – Usage

<script type="text/javascript" src="selectize.js"></script>
<link rel="stylesheet" type="text/css" href="selectize.css" />
<script>
$(function() {
    $('select').selectize(options);
});
</script>