Selectize.js

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'), );