### Installing Selectize with npm/yarn
Source: https://github.com/selectize/selectize.js/blob/master/docs/docs/intro.mdx
This snippet demonstrates how to install the Selectize library using npm or yarn, which are popular package managers for JavaScript projects. This method is recommended for modern web development workflows.
```bash
npm install @selectize/selectize
```
--------------------------------
### Starting Selectize.js Local Development Server (Shell)
Source: https://github.com/selectize/selectize.js/blob/master/README.md
This command initiates the local development server for Selectize.js. Once the server is running, examples can be accessed in a web browser at the specified loopback address.
```Shell
npm start
```
--------------------------------
### Installing Project Dependencies with Yarn
Source: https://github.com/selectize/selectize.js/blob/master/docs/README.md
This command installs all required project dependencies using Yarn, preparing the environment for local development or building the website.
```Shell
$ yarn
```
--------------------------------
### Starting Local Development Server for Selectize.js (Bash)
Source: https://github.com/selectize/selectize.js/blob/master/docs/docs/contribute.mdx
This command initiates a local web server, enabling developers to view and test changes against the project's example pages and documentation. It's essential for verifying UI-related changes and new plugin functionalities in a live environment.
```bash
npm start
```
--------------------------------
### Starting Local Development Server with Yarn
Source: https://github.com/selectize/selectize.js/blob/master/docs/README.md
This command initiates a local development server and automatically opens a browser window. It supports live reloading, reflecting most changes without requiring a server restart.
```Shell
$ yarn start
```
--------------------------------
### Including Selectize via CDN
Source: https://github.com/selectize/selectize.js/blob/master/docs/docs/intro.mdx
This HTML snippet shows how to quickly integrate Selectize into a web project by linking its CSS and JavaScript files directly from a Content Delivery Network (CDN). This approach is ideal for rapid prototyping or projects where a package manager is not used.
```html
HTML element. It uses jQuery's `$(function() { ... });` shorthand for document ready and calls the `selectize()` method with a placeholder `options` object. This is the simplest way to get Selectize working.
```HTML
```
--------------------------------
### Declaring Plugin Dependencies in Selectize
Source: https://github.com/selectize/selectize.js/blob/master/docs/docs/plugins.mdx
This example demonstrates how a Selectize plugin can declare a dependency on another plugin using `this.require()`. This ensures that the specified plugin is loaded and available before the current plugin's logic executes.
```javascript
Selectize.define("plugin_name", function (options) {
this.require("another_plugin");
});
```
--------------------------------
### Configuring clear_button Plugin in Selectize.js
Source: https://github.com/selectize/selectize.js/blob/master/docs/docs/API/clear_button Plugin.mdx
This snippet demonstrates how to initialize Selectize.js on a element and configure the 'clear_button' plugin. It shows how to customize the button's title, class name, and label, and provides an example of a custom HTML rendering function for the button.
```javascript
$('select').selectize({
plugins: [
{
clear_button: {
title: 'Custom title',
className: 'custom-class',
label: 'custom label',
html: (data) => {
return (
`${data.label} `;
}
}
}
]
});
```
--------------------------------
### Rendering Diacritics Component - JSX
Source: https://github.com/selectize/selectize.js/blob/master/docs/docs/demos/diacritics.mdx
This snippet renders the `Diacritics` component, which is responsible for displaying the interactive Selectize example that showcases diacritic support. It's the main interactive element on the page.
```JSX
yarn deploy
```
--------------------------------
### Running Functional and Unit Tests for Selectize.js (Bash)
Source: https://github.com/selectize/selectize.js/blob/master/docs/docs/contribute.mdx
This command executes the full suite of functional and unit tests for the Selectize.js project. It's crucial to run these tests to verify that any changes or new contributions do not introduce regressions and that all existing functionalities work as expected.
```bash
npm run test
```
--------------------------------
### Enabling Selectize Plugins Without Options
Source: https://github.com/selectize/selectize.js/blob/master/docs/docs/plugins.mdx
This snippet demonstrates how to enable one or more Selectize plugins when initializing a select element. Plugins are specified as an array of strings under the `plugins` property in the Selectize configuration object.
```javascript
$("select").selectize({
plugins: ["plugin_a", "plugin_b"]
});
```
--------------------------------
### Defining a Basic Selectize Plugin
Source: https://github.com/selectize/selectize.js/blob/master/docs/docs/plugins.mdx
This snippet shows the basic boilerplate for defining a Selectize plugin. It uses `Selectize.define` to register a new plugin, providing access to plugin-specific options and the Selectize instance itself within the function.
```javascript
Selectize.define("plugin_name", function (options) {
// options: plugin-specific options
// this: Selectize instance
});
```
--------------------------------
### Apache License 2.0 Text
Source: https://github.com/selectize/selectize.js/blob/master/docs/src/pages/license.mdx
This snippet contains the full text of the Apache License, Version 2.0, which governs the use, reproduction, and distribution of Selectize. It defines key terms such as "License", "Licensor", "Work", and "Contribution", and outlines the terms and conditions for compliance.
```Plain Text
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
```
--------------------------------
### Initializing Selectize with optgroup_columns Plugin (JavaScript)
Source: https://github.com/selectize/selectize.js/blob/master/docs/docs/API/optgroup_columns Plugin.mdx
This snippet demonstrates how to initialize the Selectize.js library on a `` element, enabling the `optgroup_columns` plugin. It shows how to configure the plugin's `equalizeWidth` and `equalizeHeight` options to `false`, preventing the plugin from automatically adjusting the width and height of optgroup columns. This is useful for custom styling or when automatic equalization is not desired.
```JavaScript
$('select').selectize({
plugins: [
{
optgroup_columns: {
equalizeWidth: false,
equalizeHeight: false
}
}
]
});
```
--------------------------------
### Configuring dropdown_header Plugin with Custom HTML Rendering in Selectize.js
Source: https://github.com/selectize/selectize.js/blob/master/docs/docs/API/dropdown_header Plugin.mdx
This snippet demonstrates how to initialize Selectize.js with the `dropdown_header` plugin, customizing its appearance and behavior. It shows how to set a custom title, apply custom CSS classes, and provide a custom HTML rendering function for the header, which receives plugin options as `data`.
```javascript
$('select').selectize({
plugins: [
{
dropdown_header: {
title: 'Custom title',
headerClass: 'custom-header-class',
labelClass: 'custom-label-class',
closeClass: 'custom-close-class',
html: (data) => {
// data contain all options values
return (
`${data.title} `;
}
}
}
]
});
```
--------------------------------
### Initializing Selectize Control (JavaScript)
Source: https://github.com/selectize/selectize.js/blob/master/docs/docs/api.mdx
This snippet demonstrates how to initialize a Selectize control on a 'select' HTML element using jQuery. It applies the 'selectize' method with a set of 'options' to transform the element into a Selectize instance, returning a jQuery object referencing the new control.
```javascript
// initialize the Selectize control
var $select = $("select").selectize(options);
```
--------------------------------
### Extending Selectize Methods by Wrapping
Source: https://github.com/selectize/selectize.js/blob/master/docs/docs/plugins.mdx
This snippet illustrates a common pattern for extending or overriding existing Selectize methods within a plugin. It involves wrapping the original method to execute custom logic before or after calling the original implementation, ensuring core functionality is preserved.
```javascript
var self = this;
this.someMethod = (function () {
var original = self.someMethod;
return function () {
// do your logic
return original.apply(this, arguments);
};
})();
```
--------------------------------
### Basic Initialization of Selectize with jQuery
Source: https://github.com/selectize/selectize.js/blob/master/README.md
This code snippet shows the fundamental way to initialize Selectize on a standard HTML element using jQuery. The selectize() method is called on a jQuery selector, and an optional options object can be passed to configure its behavior, such as search settings, plugins, or callbacks.
```javascript
$("select").selectize(options);
```
--------------------------------
### Fetching Selectize Instance (JavaScript)
Source: https://github.com/selectize/selectize.js/blob/master/docs/docs/api.mdx
This snippet shows how to retrieve the underlying Selectize instance from a previously initialized jQuery-wrapped element. The 'selectize' property is added to the raw DOM element ('$select[0]') during initialization, providing direct access to the Selectize API methods.
```javascript
// fetch the instance
var selectize = $select[0].selectize;
```
--------------------------------
### Importing AutoFillDisable Component - JavaScript
Source: https://github.com/selectize/selectize.js/blob/master/docs/docs/plugins/autofill-disable.mdx
This snippet imports the `AutoFillDisable` React component from its source path, making it available for use within the current MDX documentation file. It is a necessary prerequisite for rendering the component on the page.
```JavaScript
import AutoFillDisable from '@site/src/components/Examples/Plugins/AutoFillDisable';
```
--------------------------------
### Importing RTL Component in JavaScript
Source: https://github.com/selectize/selectize.js/blob/master/docs/docs/demos/rtl.mdx
This JavaScript snippet imports the `Rtl` component from a specified local path. This is a common pattern in modern JavaScript applications, especially those built with frameworks like React, to bring in reusable UI components or utility modules.
```JavaScript
import Rtl from "@site/src/components/Examples/Rtl";
```
--------------------------------
### Importing Diacritics Component - JavaScript
Source: https://github.com/selectize/selectize.js/blob/master/docs/docs/demos/diacritics.mdx
This snippet imports the `Diacritics` component from a specified local path. This component is a prerequisite for demonstrating Selectize's diacritics handling capabilities within the page.
```JavaScript
import Diacritics from '@site/src/components/Examples/Diacritics';
```
--------------------------------
### Rendering RTL Component in JSX
Source: https://github.com/selectize/selectize.js/blob/master/docs/docs/demos/rtl.mdx
This JSX snippet demonstrates how to render the imported `Rtl` component within a larger React component or page. The self-closing tag `` element and enable the `autofill_disable` plugin. By including `'autofill_disable'` in the `plugins` array, the Selectize control will generate random `name` and `autocomplete` attributes to prevent browser autofill behavior. This is a common workaround for browsers that do not fully respect `autocomplete="off".
```JavaScript
$('select').selectize({
plugins: ['autofill_disable']
});
```
--------------------------------
### Iterating Collections with Sifter (JavaScript)
Source: https://github.com/selectize/selectize.js/blob/master/docs/docs/API/sifter.mdx
This snippet demonstrates how to use the `iterator` method of the Sifter class to loop over items in an array or object. It provides a callback function that is invoked for each item, along with its ID, allowing for custom processing of each element.
```JavaScript
this.iterator(this.items, function(item, id) {
// invoked for each item
});
```
--------------------------------
### Applying Basic Padding to Body Element (CSS)
Source: https://github.com/selectize/selectize.js/blob/master/dist/lib/bootstrap2/tests/forms-responsive.html
This CSS snippet applies 30 pixels of padding to the top and bottom of the HTML body element. This is a common practice for ensuring content doesn't touch the very top or bottom edges of the viewport, often used in conjunction with frameworks like Bootstrap to provide visual spacing.
```CSS
body { padding-top: 30px; padding-bottom: 30px; }
```
--------------------------------
### Styling Body Padding with CSS
Source: https://github.com/selectize/selectize.js/blob/master/dist/lib/bootstrap2/tests/buttons.html
This CSS snippet applies padding to the `body` element, setting both top and bottom padding to 30 pixels. This is a fundamental styling technique used for basic page layout adjustments, ensuring content is spaced appropriately from the viewport edges.
```css
body { padding-top: 30px; padding-bottom: 30px; }
```
--------------------------------
### Setting Body Padding in Bootstrap CSS
Source: https://github.com/selectize/selectize.js/blob/master/lib/bootstrap2/tests/forms-responsive.html
This CSS snippet applies a uniform 30-pixel padding to the top and bottom of the `body` element. This is a common practice in web development, especially with frameworks like Bootstrap, to ensure content is not directly against the top or bottom edges of the viewport, often used to accommodate fixed navigation bars or footers.
```CSS
body { padding-top: 30px; padding-bottom: 30px; }
```
--------------------------------
### Setting Body Padding in CSS
Source: https://github.com/selectize/selectize.js/blob/master/lib/bootstrap2/tests/buttons.html
This CSS snippet defines the top and bottom padding for the `body` element, setting both to 30 pixels. This is a common practice for adjusting the overall layout and spacing of content within a webpage.
```css
body { padding-top: 30px; padding-bottom: 30px; }
```
--------------------------------
### Styling Body Padding with CSS
Source: https://github.com/selectize/selectize.js/blob/master/dist/lib/bootstrap2/tests/forms.html
This CSS snippet applies top and bottom padding to the `body` element. This is a common practice in web design, especially when using frameworks like Bootstrap, to ensure content is not flush with the top or bottom of the viewport, often accommodating fixed navigation bars or footers.
```CSS
body { padding-top: 30px; padding-bottom: 30px; }
```
--------------------------------
### Styling Body Padding with Bootstrap CSS
Source: https://github.com/selectize/selectize.js/blob/master/lib/bootstrap2/tests/forms.html
This CSS snippet applies padding to the `body` element, commonly used in Bootstrap layouts to prevent content from touching the top or bottom edges of the viewport. It ensures a visual offset for the page content.
```CSS
body { padding-top: 30px; padding-bottom: 30px; }
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.