Selectize.js – A hybrid of a Textbox and Select Field

Selectize.js

Selectize.js is a highly configurable, solid Select Form-Field replacement for jQuery. The Script itself is compatible with all modern browsers, including touch devices as well as the 9, by using es5-shim you can also support 8. It requires at least jQuery 1.7, as well as sifter.js and microplugin.js. The last both scripts are also included in the “standalone” edition!

This Select-Form plugin comes up with an smart search and ranking method, a extend- and translatable environment as well as an clean API and code structure. You can also manipulate and remote-load options dynamically, and the script itself contains also key listener for an intuitive operation and control! Selectize.js can also be used as combination of an text input field with an dropdown selection popup!

Download the latest version of Selectize.js as .ZIP or as .TAR package!

npm i selectize --save

yarn add selectize --save

bower install selectize --save

Instructions

The package itself contains the main JavaScript as default and as standalone edition, both in unminified and minified versions. The Standalone version already contains the microplugin.js and sifter.js dependencies! The CSS Part consists of the main Stylesheet as well as 4 different styles (including a Bootstrap2 and Bootstrap 3 theme). All Stylesheets are also available as Pre-Compiled LESS Files.

 

Load Selectize.js

It’s recommended to load the Stylesheet (and the respective theme, if desired) directly within the HTML header. The JavaScript Files can be located wherever you want, but we recommend it to load the jQuery library and the standalone Select2 script immediately after the opened <body> tag.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        
        <!-- Required Stylesheet -->
        <link type="text/css" rel="stylesheet" href="/css/selectize.css" />
        
        <!-- Additional Theme Stylesheet -->
        <link type="text/css" rel="stylesheet" href="/css/selectize.legacy.css" />
    </head>
    <body>
        <!-- Required jQuery Library -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/selectize.min.js"></script>
    </body>
</html>

 

Configure Selectize.js

The script itself contains MANY settings and configurations to adapt the design and control the behavior. It’s really recommended to read the Usage Documentation.

jQuery(document).ready(function(){
    $("select").selectize({
        options:                [],
        optgroups:              [],
        items:                  [],
        delimiter:              ",", 
        create:                 false,
        createOnBlur:           false,
        createFilter:           null,
        highlight:              true,
        persist:                true,
        openOnFocus:            true,
        maxOptions:             1000,
        maxItems:               null,
        hideSelected:           null,
        closeAfterSelect:       false,
        allowEmptyOption:       false,
        scrollDuration:         60,
        loadThrottle:           300,
        loadingClass:           "loading",
        placeholder:            undefined,
        preload:                false,
        dropdownParent:         null,
        addPredence:            false,
        selectOnTab:            false,
        diacritics:             true,
        dataAttr:               "data-data",
        valueField:             "value",
        optgroupValueField:     "value",
        laelField:              "text",
        optgroupLabelField:     "label",
        optgroupField:          "optgroup",
        disabledField:          "disabled",
        sortField:              "$order",
        searchField:            ["text"],
        searchConjunction:      "and",
        lockOptgroupOrder:      false,
        copyClassesToDropdown:  true,
        render:                 {}
    });
});

 

Configure: Options

options
An array of the initial options available to select; array of objects. By default this is populated from the original input element. If your element is a <select> with <option>s specified this property gets populated automatically. Setting this property is convenient if you have your data as an array and want to automatically generate the <option>s.
optgroups
Option groups that options will be bucketed into. If your element is a <select> with <optgroup>s this property gets populated automatically. Make sure each object in the array has a property named whatever optgroupValueField is set to.
items
An array of the initial selected values. By default this is populated from the original input element.
delimiter
The string to separate items by. When typing an item in a multi-selection control allowing creation, then the delimiter, the item is added. If you paste delimiter-separated items in such control, the items are added at once. The delimiter is also used in the getValue API call on a text <input> tag to separate the multiple values.
create
Allows the user to create new items that aren’t in the initial list of options. This setting can be any of the following: true, false (disabled), or a function to process input. The function can take one of two forms: synchronous (with signature function(input){} or asynchronous (with signature function(input, callback). In the synchronous case, the function should return an object for the options (eg, with defaults: return { 'value': value, 'text': text };). The asynchronous version should invoke the callback with the result in the same format as the object above (eg, callback( { 'value': value, 'text': text});)
createOnBlur
If true, when user exits the field (clicks outside of input), a new option is created and selected (if create setting is enabled).
createFilter
Specifies a RegExp or a string containing a regular expression that the current search filter must match to be allowed to be created. May also be a predicate function that takes the filter text and returns whether it is allowed.
highlight
Toggles match highlighting within the dropdown menu.
persist
If false, items created by the user will not show up as available options once they are unselected.
openOnFocus
Show the dropdown immediately when the control receives focus.
maxOptions
The max number of items to render at once in the dropdown list of options.
maxItems
The max number of items the user can select. 1 makes the control mono-selection, null allows an unlimited number of items.
hideSelected
If true, the items that are currently selected will not be shown in the dropdown list of available options. This defaults to true when in a multi-selection control, to false otherwise.
closeAfterSelect
If true, the dropdown will be closed after a selection is made.
allowEmptyOption
If true, Selectize will treat any options with a “” value like normal. This defaults to false to accomodate the common <select> practice of having the first empty option to act as a placeholder.
scrollDuration
The animation duration (in milliseconds) of the scroll animation triggered when going [up] and [down] in the options dropdown.
loadThrottle
The number of milliseconds to wait before requesting options from the server or null. If null, throttling is disabled. Useful when loading options dynamically while the user types a search / filter expression.
loadingClass
The class name added to the wrapper element while awaiting the fulfillment of load requests.
placeholder
The placeholder of the control (displayed when nothing is selected / typed). Defaults to input element’s placeholder, unless this one is specified.
preload
If true, the load function will be called upon control initialization (with an empty search). Alternatively it can be set to ‘focus’ to call the load function when control receives focus.
dropdownParent
The element the dropdown menu is appended to. This should be ‘body’ or null. If null, the dropdown will be appended as a child of the Selectize control.
addPredence
If true, the “Add…” option is the default selection in the dropdown.
selectOnTab
If true, the tab key will choose the currently selected item.
diacritics
Enable or disable international character support.
dataAttr
The <option> attribute from which to read JSON data about the option.
valueField
The name of the property to use as the value when an item is selected.
optgroupValueField
The name of the option group property that serves as its unique identifier.
laelField
The name of the property to render as an option / item label (not needed when custom rendering functions are defined).
optgroupLabelField
The name of the property to render as an option group label (not needed when custom rendering functions are defined).
optgroupField
The name of the property to group items by.
disabledField
The name of the property to disabled option and optgroup.
sortField
A single field or an array of fields to sort by. Each item in the array should be an object containing at least a field property. Optionally, direction can be set to ‘asc’ or ‘desc’. The order of the array defines the sort precedence.
searchField
An array of property names to analyze when filtering options.
searchConjunction
When searching for multiple terms (separated by space), this is the operator used. Can be ‘and’ or ‘or’ .
lockOptgroupOrder
If truthy, Selectize will make all optgroups be in the same order as they were added (by the `$order` property). Otherwise, it will order based on the score of the results in each.
copyClassesToDropdown
Copy the original input classes to the dropdown element.
render
Custom rendering functions. Each function should accept two arguments: data and escape and return HTML (string or DOM element) with a single root element. The escape argument is a function that takes a string and escapes all special HTML characters. This is very important to use to prevent XSS vulnerabilities.

Leave a Reply

Top