Selectize.js

The Selectize library itself does not collect any personal information or send/receive any telemetry data.

This privacy policy applies exclusively to the Selectize documentation website (https://selectize.dev). If you are using the library in your own application, it does not perform any data collection or tracking as part of its core functionality.

Before using Selectize, ensure you meet the following requirements:

• jQuery: Selectize requires jQuery to function.
• jQuery UI: Required only if you intend to use the Drag & Drop plugin.
• Styles: The library includes Bootstrap styles and provides raw Less and Sass files for customization with other frameworks.

Selectize uses the microplugin interface to allow features to be added without modifying the core library. This system is designed to be lean and provides developers with complete control over the plugin lifecycle.

Key lifecycle details:

• Initialization: Plugins are initialized immediately before the control is set up.
• DOM Access: Because control elements are created during the setup() phase, you must override the setup() method if your plugin needs to attach event listeners to the control's DOM elements.

Understanding the terminology used in Selectize:

• Config/configuration: The initial settings provided during initialization.
• Settings: The current settings of a Selectize instance, accessible via the setting property of the Selectize object.
• Options: The list of objects available to select.
  • Each object requires a unique value (defined by valueField) to identify it.
  • Each object requires a label to display (defined by labelField).
  • Other properties (like sortField or searchField) are used for internal logic.
• Items: The list of currently selected values (the chosen option values).

The Drag & Drop plugin allows users to rearrange selected items within a Selectize instance by dragging them.

Requirement: This plugin requires jQuery UI (sortable) to function. Ensure jQuery UI is loaded in your environment before initializing the plugin.

The website can be deployed using different methods depending on your environment:

Using SSH: Set the USE_SSH environment variable to true.

Using GitHub Pages (Non-SSH): Provide your GitHub username via the GIT_USER environment variable. This command builds the website and pushes it to the gh-pages branch.

# Deploy using SSH
$ USE_SSH=true yarn deploy

# Deploy to GitHub Pages
$ GIT_USER=<Your GitHub username> yarn deploy

To ensure all functional and unit tests pass, run:

npm run test

To run tests against specific browsers (e.g., Firefox, Chrome, Safari), use the BROWSERS environment variable:

BROWSERS=Firefox,Chrome,Safari npm test

The fastest way to add Selectize to your project is to include the JavaScript and CSS files directly from cdnjs. Ensure you include the CSS before the JavaScript.

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/css/selectize.default.min.css"
  integrity="sha512-pTaEn+6gF1IeWv3W1+7X7eM60TFu/agjgoHmYhAfLEU8Phuf6JKiiE8YmsNC0aCgQv4192s4Vai8YZ6VNM6vyQ=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
/>
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/js/selectize.min.js"
  integrity="sha512-IOebNkvA/HZjMM7MxL0NYeLYEalloZ8ckak+NDtOViP7oiYzG5vn6WVXyrJDiJPhl4yRdmNAG49iuLmhkUdVsQ=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
></script>

Selectize allows you to organize options into logical groups within the dropdown menu. This is useful for categorizing long lists of items, making them easier for users to navigate.

// Concept demonstration: Grouping options in Selectize
$('#select-ize-opt-groups').selectize({
  // Options are typically structured with a 'optgroup' property
  // or via specific data formats to enable grouping
});