Selectize is a jQuery-based custom
UI control. 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. Plugin originally developed by @brianreavis.
Features
- Clean API & Clean Code — Interface & make modifications to it like a boss. Fully documented on GitHub & inline.
- Smart Ranking / Multi-property searching — 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.
- 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.
- 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.
Docs
Find out more: https://selectize.github.io/selectize.js/
How to Use
Drupal 7
Simply use the 'selectize' form element, and the provided default settings or you can override the defaults with your own. Most of the plugins for selectize, like remove_button, are supported.
// vanilla usage
$form['foo'] = array(
'#title' => 'Select Something',
'#type' => 'selectize',
'#settings' => selectize_default_settings(),
'#options' => array('' => 'Pick something or enter your own', 1 => 'ABC', 2 => 'DEF', 3 => 'GHI'),
);
// or change some of the default configuration
$form['bar'] = array(
'#title' => 'Select Something',
'#type' => 'selectize',
'#settings' => selectize_default_settings(
array(
'create' => TRUE,
'delimiter' => ', ',
'persist' => TRUE,
'plugins' => array('remove_button')
)
),
'#options' => array('' => 'Pick something or enter your own', 1 => 'ABC', 2 => 'DEF', 3 => 'GHI'),
);
Drupal 8
At the top of your file, include the Selectize element class:
use Drupal\selectize\Element\Selectize;
In your form(s) where you want to Selectize an input:
$form['foo'] = array(
'#type' => 'selectize',
'#title' => t('Selectize'),
'#settings' => Selectize::settings(),
'#options' => array('' => 'Pick something or enter your own', 1 => 'ABC', 2 => 'DEF', 3 => 'GHI'),
);
This will provide a basic Selectized element. You can also include your own settings overrides, like so:
$form['bar'] = array(
'#type' => 'selectize',
'#title' => t('Selectize'),
'#settings' => Selectize::settings(
array(
'maxItems' => 5,
'plugins' => array('remove_button', 'drag_drop'),
)
),
'#options' => array('' => 'Pick something or enter your own', 1 => 'ABC', 2 => 'DEF', 3 => 'GHI'),
);
Project information
- Module categories: Site Structure, Developer Tools
- 74 sites report using this module
- Created by kevinquillen on , updated
- Stable releases for this project are covered by the security advisory policy.
There are currently no supported stable releases.
Releases
Development version: 7.x-1.x-dev updated 15 Mar 2016 at 18:24 UTC