Skip to content

Latest commit

 

History

History
205 lines (202 loc) · 8.08 KB

usage.md

File metadata and controls

205 lines (202 loc) · 8.08 KB
Raw

Selectize Usage

<script type="text/javascript" src="selectize.js"></script>
<link rel="stylesheet" type="text/css" href="selectize.css" />
<script type="text/javascript">
$(function() {
	$('select').selectize(options);
});
</script>

Options

General
Option Description Type
delimiter The string to separate items by. This option is only used when Selectize is instantiated from a <input type="text"> element. string
diacritics Enable or disable international character support. boolean
create Allows the user to create a new items that aren't in the list of options. This option can be any of the following: "true" (default behavior), "false" (disabled), or a function that accepts two arguments: "input" and "callback". The callback should be invoked with the final data for the option. mixed
highlight Toggles match highlighting within the dropdown menu. boolean
persist If false, items created by the user will not show up as available options once they are unselected. boolean
openOnFocus Show the dropdown immediately when the control receives focus. boolean
maxOptions The max number of items to render at once in the dropdown list of options. int
maxItems The max number of items the user can select. int
hideSelected If true, the items that are currently selected will not be shown in the dropdown list of available options. boolean
scrollDuration The animation duration (in milliseconds) of the scroll animation triggered when going [up] and [down] in the options dropdown. int
loadThrottle The number of milliseconds to wait before requesting options from the server. int
Data / Searching
Option Description Type
dataAttr The <option> attribute from which to read JSON data about the option. string
valueField The name of the property to use as the "value" when an item is selected. string
labelField The name of the property to render as the option/item label (not needed when custom rendering functions are defined). string
sortField The name of the property to sort by. This is only used when the score of two or more items is identical. string
sortDirection Sort direction ("asc" or "desc"). string
searchField An array of property names to analyze when filtering options. array
Callbacks
Option Description Type
load(query, callback) Invoked when new options should be loaded from the server. function
score(search) Overrides the scoring function used to sort available options. The provided function should return a function that returns a number greater than or equal to zero to represent the "score" of an item (the function's first argument). If 0, the option is declared not a match. The "search" argument is a Search object. For an example, see the "GitHub" example. function
onChange(value) Invoked when the value of the control changes. function
onItemAdd(value, $item) Invoked when an item is selected. function
onItemRemove(value) Invoked when an item is deselected. function
onClear() Invoked when the control is manually cleared via the clear() method. function
onOptionAdd(value, data) Invoked when a new option is added to the available options list. function
onOptionRemove(value) Invoked when an option is removed from the available options. function
onDropdownOpen($dropdown) Invoked when the dropdown opens. function
onDropdownClose($dropdown) Invoked when the dropdown closes. function
onType(str) Invoked when the user types while filtering options. function
Rendering
render An object containing any of the following methods:
option(data) An option in the dropdown list of available options.
item(data) An item the user has selected.
option_create(data) The "create new" option at the bottom of the dropdown. The "data" argument contains one property: "input" (which is what the user has typed).
object