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