Tim Schumacher
parent
3a862e7432
commit
faad41f5e2
94 changed files with 37138 additions and 4 deletions
247
web/vendor/selectize.js/docs/api.md
vendored
Normal file
247
web/vendor/selectize.js/docs/api.md
vendored
Normal file
|
|
@ -0,0 +1,247 @@
|
|||
## Selectize API
|
||||
|
||||
Selectize controls can be controlled programmatically via the methods described in this section.
|
||||
When initializing the control, the "selectize" property is
|
||||
added on the original <select> / <input> element—this
|
||||
property points to the underlying Selectize instance.
|
||||
|
||||
```js
|
||||
// initialize the selectize control
|
||||
var $select = $('select').selectize(options);
|
||||
|
||||
// fetch the instance
|
||||
var selectize = $select[0].selectize;
|
||||
```
|
||||
|
||||
#### Related Topics
|
||||
|
||||
- [Event Documentation](events.md)
|
||||
- [Developing Plugins](plugins.md)
|
||||
|
||||
### Methods
|
||||
|
||||
<table width="100%">
|
||||
<tr>
|
||||
<th valign="top" colspan="3" align="left"><a href="#methods_options" name="methods_options">Options</a></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th valign="top" width="120px" align="left">Method</th>
|
||||
<th valign="top" align="left">Description</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>addOption(data)</code></td>
|
||||
<td valign="top">Adds an available option, or array of options. If it already exists, nothing will happen. Note: this does not refresh the options list dropdown (use refreshOptions() for that).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>updateOption(value, data)</code></td>
|
||||
<td valign="top">Updates an option available for selection. If it is visible in the selected items or options dropdown, it will be re-rendered automatically.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>removeOption(value)</code></td>
|
||||
<td valign="top">Removes the option identified by the given value.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>clearOptions()</code></td>
|
||||
<td valign="top">Removes all options from the control.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>getOption(value)</code></td>
|
||||
<td valign="top">Retrieves the jQuery element for the option identified by the given value.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>getAdjacentOption(value, direction)</code></td>
|
||||
<td valign="top">Retrieves the jQuery element for the previous or next option, relative to the currently highlighted option. The "direction" argument should be 1 for "next" or -1 for "previous".</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>refreshOptions(triggerDropdown)</code></td>
|
||||
<td valign="top">Refreshes the list of available options shown in the autocomplete dropdown menu.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th valign="top" colspan="3" align="left"><a href="#methods_items" name="methods_items">Items</a></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th valign="top" width="120px" align="left">Method</th>
|
||||
<th valign="top" align="left">Description</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>clear(silent)</code></td>
|
||||
<td valign="top">Resets / clears all selected items from the control. If "silent" is truthy, no change event will be fired on the original input.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>getItem(value)</code></td>
|
||||
<td valign="top">Returns the jQuery element of the item matching the given value.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>addItem(value, silent)</code></td>
|
||||
<td valign="top">"Selects" an item. Adds it to the list at the current caret position. If "silent" is truthy, no change event will be fired on the original input.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>removeItem(value, silent)</code></td>
|
||||
<td valign="top">Removes the selected item matching the provided value. If "silent" is truthy, no change event will be fired on the original input.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>createItem(value, callback)</code></td>
|
||||
<td valign="top">Invokes the "create" method provided in the selectize options that should provide the data for the new item, given the user input. Once this completes, it will be added to the item list.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>refreshItems()</code></td>
|
||||
<td valign="top">Re-renders the selected item lists.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th valign="top" colspan="3" align="left"><a href="#methods_items" name="methods_optgroups">Optgroups</a></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th valign="top" width="120px" align="left">Method</th>
|
||||
<th valign="top" align="left">Description</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>addOptionGroup(id, data)</code></td>
|
||||
<td valign="top">Registers a new optgroup for options to be bucketed into. The "id" argument refers to a value of the property in option identified by the "optgroupField" setting.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>removeOptionGroup(id)</code></td>
|
||||
<td valign="top">Removes a single option group.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>clearOptionGroups()</code></td>
|
||||
<td valign="top">Removes all existing option groups.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th valign="top" colspan="3" align="left"><a href="#methods_events" name="methods_events">Events</a></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th valign="top" width="120px" align="left">Method</th>
|
||||
<th valign="top" align="left">Description</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>on(event, handler)</code></td>
|
||||
<td valign="top">Adds an event listener.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>off(event, handler)</code></td>
|
||||
<td valign="top">Removes an event listener.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>off(event)</code></td>
|
||||
<td valign="top">Removes all event listeners.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>trigger(event, ...)</code></td>
|
||||
<td valign="top">Triggers event listeners.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th valign="top" colspan="3" align="left"><a href="#methods_dropdown" name="methods_dropdown">Dropdown</a></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th valign="top" width="120px" align="left">Method</th>
|
||||
<th valign="top" align="left">Description</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>open()</code></td>
|
||||
<td valign="top">Shows the autocomplete dropdown containing the available options.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>close()</code></td>
|
||||
<td valign="top">Closes the autocomplete dropdown menu.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>positionDropdown()</code></td>
|
||||
<td valign="top">Calculates and applies the appropriate position of the dropdown.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th valign="top" colspan="3" align="left"><a href="#methods_other" name="methods_other">Other</a></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th valign="top" width="120px" align="left">Method</th>
|
||||
<th valign="top" align="left">Description</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>destroy()</code></td>
|
||||
<td valign="top">Destroys the control and unbinds event listeners so that it can be garbage collected.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>load(fn)</code></td>
|
||||
<td valign="top">Loads options by invoking the the provided function. The function should accept one argument (callback) and invoke the callback with the results once they are available.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>focus()</code></td>
|
||||
<td valign="top">Brings the control into focus.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>blur()</code></td>
|
||||
<td valign="top">Forces the control out of focus.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>lock()</code></td>
|
||||
<td valign="top">Disables user input on the control (note: the control can still receive focus).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>unlock()</code></td>
|
||||
<td valign="top">Re-enables user input on the control.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>disable()</code></td>
|
||||
<td valign="top">Disables user input on the control completely. While disabled, it cannot receive focus.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>enable()</code></td>
|
||||
<td valign="top">Enables the control so that it can respond to focus and user input.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>getValue()</code></td>
|
||||
<td valign="top">Returns the value of the control. If multiple items can be selected (e.g. <a href="usage.md#maxItems"><select multiple></a>, this returns an array. If only one item can be selected, this returns a string.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>setValue(value, silent)</code></td>
|
||||
<td valign="top">Resets the selected items to the given value.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>setCaret(index)</code></td>
|
||||
<td valign="top">Moves the caret to the specified position ("index" being the index in the list of selected items).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>isFull()</code></td>
|
||||
<td valign="top">Returns whether or not the user can select more items.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>clearCache(template)</code></td>
|
||||
<td valign="top">Clears the render cache. Takes an optional template argument (e.g. "option", "item") to clear only that cache.</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
### Related Objects
|
||||
|
||||
#### Search
|
||||
|
||||
<table width="100%">
|
||||
<tr>
|
||||
<th valign="top" width="120px" align="left">Option</th>
|
||||
<th valign="top" align="left">Description</th>
|
||||
<th valign="top" width="60px" align="left">Type</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>options</code></td>
|
||||
<td valign="top">Original search options.</td>
|
||||
<td valign="top"><code>object</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>query</code></td>
|
||||
<td valign="top">The raw user input.</td>
|
||||
<td valign="top"><code>string</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>tokens</code></td>
|
||||
<td valign="top">An array containing parsed search tokens. A token is an object containing two properties: "string" and "regex".</td>
|
||||
<td valign="top"><code>array</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>total</code></td>
|
||||
<td valign="top">The total number of results.</td>
|
||||
<td valign="top"><code>int</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>items</code></td>
|
||||
<td valign="top">A list of matched results. Each result is an object containing two properties: "score" and "id".</td>
|
||||
<td valign="top"><code>array</code></td>
|
||||
</tr>
|
||||
</table>
|
||||
114
web/vendor/selectize.js/docs/events.md
vendored
Normal file
114
web/vendor/selectize.js/docs/events.md
vendored
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
## Selectize API – Events
|
||||
|
||||
In the [usage documentation](usage.md), a few callbacks are listed that
|
||||
allow you to listen for certain events. Callbacks aren't always ideal though;
|
||||
specifically when you wish to have multiple handlers.
|
||||
|
||||
Selectize instances have a basic event emitter interface that mimics jQuery, Backbone.js, et al:
|
||||
|
||||
```js
|
||||
var handler = function() { /* ... */ };
|
||||
selectize.on('event_name', handler);
|
||||
selectize.off('event_name');
|
||||
selectize.off('event_name', handler);
|
||||
```
|
||||
|
||||
### List of Events
|
||||
|
||||
<table width="100%">
|
||||
<tr>
|
||||
<th valign="top" width="200px" align="left">Event</th>
|
||||
<th valign="top" width="100px" align="left">Params</th>
|
||||
<th valign="top" align="left">Description</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>"initialize"</code></td>
|
||||
<td valign="top"></td>
|
||||
<td valign="top">Invoked once the control is completely initialized.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>"change"</code></td>
|
||||
<td valign="top">value</td>
|
||||
<td valign="top">Invoked when the value of the control changes.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>"focus"</code></td>
|
||||
<td valign="top"></td>
|
||||
<td valign="top">Invoked when the control gains focus.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>"blur"</code></td>
|
||||
<td valign="top"></td>
|
||||
<td valign="top">Invoked when the control loses focus.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>"item_add"</code></td>
|
||||
<td valign="top">value, $item</td>
|
||||
<td valign="top">Invoked when an item is selected.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>"item_remove"</code></td>
|
||||
<td valign="top">value</td>
|
||||
<td valign="top">Invoked when an item is deselected.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>"clear"</code></td>
|
||||
<td valign="top"></td>
|
||||
<td valign="top">Invoked when the control is manually cleared via the clear() method.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>"option_add"</code></td>
|
||||
<td valign="top">value, data</td>
|
||||
<td valign="top">Invoked when a new option is added to the available options list.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>"option_remove"</code></td>
|
||||
<td valign="top">value</td>
|
||||
<td valign="top">Invoked when an option is removed from the available options.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>"option_clear"</code></td>
|
||||
<td valign="top"></td>
|
||||
<td valign="top">Invoked when all options are removed from the control.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>"optgroup_add"</code></td>
|
||||
<td valign="top">id, data</td>
|
||||
<td valign="top">Invoked when a new option is added to the available options list.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>"optgroup_remove"</code></td>
|
||||
<td valign="top">id</td>
|
||||
<td valign="top">Invoked when an option group is removed.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>"optgroup_clear"</code></td>
|
||||
<td valign="top"></td>
|
||||
<td valign="top">Invoked when all option groups are removed.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>"dropdown_open"</code></td>
|
||||
<td valign="top">$dropdown</td>
|
||||
<td valign="top">Invoked when the dropdown opens.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>"dropdown_close"</code></td>
|
||||
<td valign="top">$dropdown</td>
|
||||
<td valign="top">Invoked when the dropdown closes.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>"type"</code></td>
|
||||
<td valign="top">str</td>
|
||||
<td valign="top">Invoked when the user types while filtering options.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>"load"</code></td>
|
||||
<td valign="top">data</td>
|
||||
<td valign="top">Invoked when new options have been loaded and added to the control (via the "load" option or "load" API method).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>"destroy"</code></td>
|
||||
<td valign="top"></td>
|
||||
<td valign="top">Invoked right before the control is destroyed.</td>
|
||||
</tr>
|
||||
</table>
|
||||
101
web/vendor/selectize.js/docs/plugins.md
vendored
Normal file
101
web/vendor/selectize.js/docs/plugins.md
vendored
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
## Selectize API – Plugins
|
||||
|
||||
Via the [microplugin](https://github.com/brianreavis/microplugin.js) interface,
|
||||
features can be added to Selectize without modifying the main library.
|
||||
This is great because it protects against code bloat, allows for lean builds,
|
||||
and allows for addons to be sanely isolated. The plugin system isn't meant
|
||||
to be sexy; it's lean, makes very few assumptions, and gives the developer
|
||||
complete control.
|
||||
|
||||
[**Example Plugins**](../src/plugins)
|
||||
|
||||
**A few notes:**
|
||||
- All plugins live in their own folders in ["src/plugins"](../src/plugins).
|
||||
- Plugin names should be in follow the format: `/[a-z_]+$`
|
||||
- JS source should live in a "plugin.js" file (required).
|
||||
- CSS should live in a "plugin.less" file (optional). It will be bundled at build time.
|
||||
- Plugins are initialized right before the control is setup.
|
||||
This means that if you want to listen for events on any of the control's
|
||||
elements, you should override the `setup()` method (see ["DOM Events"](#dom-events)).
|
||||
|
||||
### Boilerplate
|
||||
|
||||
```js
|
||||
Selectize.define('plugin_name', function(options) {
|
||||
// options: plugin-specific options
|
||||
// this: selectize instance
|
||||
});
|
||||
```
|
||||
|
||||
#### Adding Dependencies
|
||||
|
||||
```js
|
||||
Selectize.define('plugin_name', function(options) {
|
||||
this.require('another_plugin');
|
||||
});
|
||||
```
|
||||
|
||||
## Overriding Methods
|
||||
|
||||
Methods should be extended by [wrapping them](http://coreymaynard.com/blog/extending-a-javascript-function/):
|
||||
|
||||
```js
|
||||
var self = this;
|
||||
this.someMethod = (function() {
|
||||
var original = self.someMethod;
|
||||
return function() {
|
||||
// do your logic
|
||||
return original.apply(this, arguments);
|
||||
};
|
||||
})();
|
||||
```
|
||||
|
||||
**Important:** If the method you're overriding returns a value, make sure the
|
||||
overridden function returns a value as well.
|
||||
|
||||
## DOM Events
|
||||
|
||||
Because all elements for the control are created within the `setup()` method (which is
|
||||
invoked after the plugin initialized) events should be added by overriding the setup method,
|
||||
like so:
|
||||
|
||||
```js
|
||||
Selectize.define('plugin_name', function(options) {
|
||||
var self = this;
|
||||
|
||||
// override the setup method to add an extra "click" handler
|
||||
this.setup = (function() {
|
||||
var original = self.setup;
|
||||
return function() {
|
||||
original.apply(this, arguments);
|
||||
this.$control.on('click', 'div', function(e) {
|
||||
alert('A div was clicked!');
|
||||
});
|
||||
};
|
||||
})();
|
||||
|
||||
});
|
||||
```
|
||||
|
||||
## Plugin Usage
|
||||
|
||||
#### List (without options)
|
||||
|
||||
```js
|
||||
$('select').selectize({
|
||||
plugins: ['plugin_a', 'plugin_b']
|
||||
});
|
||||
```
|
||||
|
||||
#### List (with options)
|
||||
|
||||
```js
|
||||
$('select').selectize({
|
||||
plugins: {
|
||||
'plugin_a': { /* ... */ },
|
||||
'plugin_b': { /* ... */ }
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
For a more detailed description of plugin option formats and how the plugin system works, check out the [microplugin](https://github.com/brianreavis/microplugin.js) documentation.
|
||||
385
web/vendor/selectize.js/docs/usage.md
vendored
Normal file
385
web/vendor/selectize.js/docs/usage.md
vendored
Normal file
|
|
@ -0,0 +1,385 @@
|
|||
## Selectize – Usage
|
||||
|
||||
```html
|
||||
<script type="text/javascript" src="selectize.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="selectize.css" />
|
||||
<script>
|
||||
$(function() {
|
||||
$('select').selectize(options);
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
<table width="100%">
|
||||
<tr>
|
||||
<th valign="top" colspan="4" align="left"><a href="#general" name="general">General</a></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th valign="top" width="120px" align="left">Option</th>
|
||||
<th valign="top" align="left">Description</th>
|
||||
<th valign="top" width="60px" align="left">Type</th>
|
||||
<th valign="top" width="60px" align="left">Default</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>delimiter</code></td>
|
||||
<td valign="top">The string to separate items by. This option is only used when Selectize is instantiated from a <input type="text"> element.</td>
|
||||
<td valign="top"><code>string</code></td>
|
||||
<td valign="top"><code>','</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>diacritics</code></td>
|
||||
<td valign="top">Enable or disable international character support.</td>
|
||||
<td valign="top"><code>boolean</code></td>
|
||||
<td valign="top"><code>true</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>create</code></td>
|
||||
<td valign="top">
|
||||
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", "false" (disabled), or a function that accepts two arguments: "input" and "callback". The callback should be invoked with the final data for the option.</td>
|
||||
<td valign="top"><code>mixed</code></td>
|
||||
<td valign="top"><code>false</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>createOnBlur</code></td>
|
||||
<td valign="top">
|
||||
If true, when user exits the field (clicks outside of input or presses ESC) new option is created and selected (if `create`-option is enabled).
|
||||
<td valign="top"><code>boolean</code></td>
|
||||
<td valign="top"><code>false</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>createFilter</code></td>
|
||||
<td valign="top">
|
||||
Specifies a RegExp or 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.</td>
|
||||
<td valign="top"><code>mixed</code></td>
|
||||
<td valign="top"><code>null</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>highlight</code></td>
|
||||
<td valign="top">Toggles match highlighting within the dropdown menu.</td>
|
||||
<td valign="top"><code>boolean</code></td>
|
||||
<td valign="top"><code>true</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>persist</code></td>
|
||||
<td valign="top">If false, items created by the user will not show up as available options once they are unselected.</td>
|
||||
<td valign="top"><code>boolean</code></td>
|
||||
<td valign="top"><code>true</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>openOnFocus</code></td>
|
||||
<td valign="top">Show the dropdown immediately when the control receives focus.</td>
|
||||
<td valign="top"><code>boolean</code></td>
|
||||
<td valign="top"><code>true</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>maxOptions</code></td>
|
||||
<td valign="top">The max number of items to render at once in the dropdown list of options.</td>
|
||||
<td valign="top"><code>int</code></td>
|
||||
<td valign="top"><code>1000</code></td>
|
||||
</tr>
|
||||
<tr name="maxItems">
|
||||
<td valign="top"><code>maxItems</code></td>
|
||||
<td valign="top">The max number of items the user can select.</td>
|
||||
<td valign="top"><code>int</code></td>
|
||||
<td valign="top"><code>1</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>hideSelected</code></td>
|
||||
<td valign="top">If true, the items that are currently selected will not be shown in the dropdown list of available options.</td>
|
||||
<td valign="top"><code>boolean</code></td>
|
||||
<td valign="top"><code>false</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>closeAfterSelect</code></td>
|
||||
<td valign="top">If true, the dropdown will be closed after a selection is made.</td>
|
||||
<td valign="top"><code>boolean</code></td>
|
||||
<td valign="top"><code>false</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>allowEmptyOption</code></td>
|
||||
<td valign="top">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 act as a placeholder.</td>
|
||||
<td valign="top"><code>boolean</code></td>
|
||||
<td valign="top"><code>false</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>scrollDuration</code></td>
|
||||
<td valign="top">The animation duration (in milliseconds) of the scroll animation triggered when going [up] and [down] in the options dropdown.</td>
|
||||
<td valign="top"><code>int</code></td>
|
||||
<td valign="top"><code>60</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>loadThrottle</code></td>
|
||||
<td valign="top">The number of milliseconds to wait before requesting options from the server or null. If null, throttling is disabled.</td>
|
||||
<td valign="top"><code>int</code></td>
|
||||
<td valign="top"><code>300</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>loadingClass</code></td>
|
||||
<td valign="top">The class name added to the wrapper element while awaiting the fulfillment of load requests.</td>
|
||||
<td valign="top"><code>string</code></td>
|
||||
<td valign="top"><code>'loading'</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>preload</code></td>
|
||||
<td valign="top">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.</td>
|
||||
<td valign="top"><code>boolean/string</code></td>
|
||||
<td valign="top"><code>false</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>dropdownParent</code></td>
|
||||
<td valign="top">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.</td>
|
||||
<td valign="top"><code>string</code></td>
|
||||
<td valign="top"><code>null</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>addPrecedence</code></td>
|
||||
<td valign="top">Sets if the "Add..." option should be the default selection in the dropdown.</td>
|
||||
<td valign="top"><code>boolean</code></td>
|
||||
<td valign="top"><code>false</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>selectOnTab</code></td>
|
||||
<td valign="top">If true, the tab key will choose the currently selected item.</td>
|
||||
<td valign="top"><code>boolean</code></td>
|
||||
<td valign="top"><code>false</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th valign="top" colspan="4" align="left"><a href="#data_searching" name="data_searching">Data / Searching</a></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th valign="top" align="left">Option</th>
|
||||
<th valign="top" align="left">Description</th>
|
||||
<th valign="top" align="left">Type</th>
|
||||
<th valign="top" align="left">Default</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>options</code></td>
|
||||
<td valign="top">Options available to select; array of objects. If your element i as <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.</td>
|
||||
<td valign="top"><code>array</code></td>
|
||||
<td valign="top"><code>[]</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>optgroups</code></td>
|
||||
<td valign="top">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.</td>
|
||||
<td valign="top"><code>array</code></td>
|
||||
<td valign="top"><code>[]</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>dataAttr</code></td>
|
||||
<td valign="top">The <option> attribute from which to read JSON data about the option.</td>
|
||||
<td valign="top"><code>string</code></td>
|
||||
<td valign="top"><code>'data-data'</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>valueField</code></td>
|
||||
<td valign="top">The name of the property to use as the "value" when an item is selected.</td>
|
||||
<td valign="top"><code>string</code></td>
|
||||
<td valign="top"><code>'value'</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>optgroupValueField</code></td>
|
||||
<td valign="top">The name of the option group property that serves as its unique identifier.</td>
|
||||
<td valign="top"><code>string</code></td>
|
||||
<td valign="top"><code>'value'</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>labelField</code></td>
|
||||
<td valign="top">The name of the property to render as an option / item label (not needed when custom rendering functions are defined).</td>
|
||||
<td valign="top"><code>string</code></td>
|
||||
<td valign="top"><code>'text'</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>optgroupLabelField</code></td>
|
||||
<td valign="top">The name of the property to render as an option group label (not needed when custom rendering functions are defined).</td>
|
||||
<td valign="top"><code>string</code></td>
|
||||
<td valign="top"><code>'label'</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>optgroupField</code></td>
|
||||
<td valign="top">The name of the property to group items by.</td>
|
||||
<td valign="top"><code>string</code></td>
|
||||
<td valign="top"><code>'optgroup'</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>sortField</code></td>
|
||||
<td valign="top">
|
||||
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.<br><br>
|
||||
|
||||
Unless present, a special "$score" field will be automatically added to the beginning
|
||||
of the sort list. This will make results sorted primarily by match quality (descending).<br><br>
|
||||
|
||||
|
||||
You can override the "$score" function. For more information, see the <a href="https://github.com/brianreavis/sifter.js#sifterjs">sifter documentation</a>.
|
||||
</td>
|
||||
<td valign="top"><code>string|array</code></td>
|
||||
<td valign="top"><code>'$order'</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>searchField</td>
|
||||
<td valign="top">An array of property names to analyze when filtering options.</td>
|
||||
<td valign="top"><code>array</code></td>
|
||||
<td valign="top"><code>['text']</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>searchConjunction</td>
|
||||
<td valign="top">When searching for multiple terms (separated by a space), this is the operator used. Can be "and" or "or".</td>
|
||||
<td valign="top"><code>string</code></td>
|
||||
<td valign="top"><code>'and'</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>lockOptgroupOrder</td>
|
||||
<td valign="top">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.</td>
|
||||
<td valign="top"><code>boolean</code></td>
|
||||
<td valign="top"><code>false</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>copyClassesToDropdown</code></td>
|
||||
<td valign="top">Copy the original input classes to the Dropdown element.</td>
|
||||
<td valign="top"><code>boolean</code></td>
|
||||
<td valign="top"><code>true</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th valign="top" colspan="4" align="left"><a href="#callbacks" name="callbacks">Callbacks</a></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th valign="top" align="left">Option</th>
|
||||
<th valign="top" align="left">Description</th>
|
||||
<th valign="top" align="left">Type</th>
|
||||
<th valign="top" align="left">Default</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>load(query, callback)</code></td>
|
||||
<td valign="top">Invoked when new options should be loaded from the server.</td>
|
||||
<td valign="top"><code>function</code></td>
|
||||
<td valign="top"><code>null</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>score(search)</code></td>
|
||||
<td valign="top">Overrides the scoring function used to sort available options. The provided function should return a <strong>function</strong> 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 <a href="#search">Search</a> object. For an example, see the <a href="https://github.com/brianreavis/selectize.js/blob/master/examples/github.html">"GitHub" example</a>.</td>
|
||||
<td valign="top"><code>function</code></td>
|
||||
<td valign="top"><code>null</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>onInitialize()</code></td>
|
||||
<td valign="top">Invoked once the control is completely initialized.</td>
|
||||
<td valign="top"><code>function</code></td>
|
||||
<td valign="top"><code>null</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>onFocus()</code></td>
|
||||
<td valign="top">Invoked when the control gains focus.</td>
|
||||
<td valign="top"><code>function</code></td>
|
||||
<td valign="top"><code>null</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>onBlur()</code></td>
|
||||
<td valign="top">Invoked when the control loses focus.</td>
|
||||
<td valign="top"><code>function</code></td>
|
||||
<td valign="top"><code>null</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>onChange(value)</code></td>
|
||||
<td valign="top">Invoked when the value of the control changes.</td>
|
||||
<td valign="top"><code>function</code></td>
|
||||
<td valign="top"><code>null</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>onItemAdd(value, $item)</code></td>
|
||||
<td valign="top">Invoked when an item is selected.</td>
|
||||
<td valign="top"><code>function</code></td>
|
||||
<td valign="top"><code>null</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>onItemRemove(value)</code></td>
|
||||
<td valign="top">Invoked when an item is deselected.</td>
|
||||
<td valign="top"><code>function</code></td>
|
||||
<td valign="top"><code>null</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>onClear()</code></td>
|
||||
<td valign="top">Invoked when the control is manually cleared via the clear() method.</td>
|
||||
<td valign="top"><code>function</code></td>
|
||||
<td valign="top"><code>null</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>onDelete(values)</code></td>
|
||||
<td valign="top">Invoked when the user attempts to delete the current selection.</td>
|
||||
<td valign="top"><code>function</code></td>
|
||||
<td valign="top"><code>null</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>onOptionAdd(value, data)</code></td>
|
||||
<td valign="top">Invoked when a new option is added to the available options list.</td>
|
||||
<td valign="top"><code>function</code></td>
|
||||
<td valign="top"><code>null</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>onOptionRemove(value)</code></td>
|
||||
<td valign="top">Invoked when an option is removed from the available options.</td>
|
||||
<td valign="top"><code>function</code></td>
|
||||
<td valign="top"><code>null</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>onDropdownOpen($dropdown)</code></td>
|
||||
<td valign="top">Invoked when the dropdown opens.</td>
|
||||
<td valign="top"><code>function</code></td>
|
||||
<td valign="top"><code>null</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>onDropdownClose($dropdown)</code></td>
|
||||
<td valign="top">Invoked when the dropdown closes.</td>
|
||||
<td valign="top"><code>function</code></td>
|
||||
<td valign="top"><code>null</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>onType(str)</code></td>
|
||||
<td valign="top">Invoked when the user types while filtering options.</td>
|
||||
<td valign="top"><code>function</code></td>
|
||||
<td valign="top"><code>null</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>onLoad(data)</code></td>
|
||||
<td valign="top">Invoked when new options have been loaded and added to the control (via the "load" option or "load" API method).</td>
|
||||
<td valign="top"><code>function</code></td>
|
||||
<td valign="top"><code>null</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th valign="top" colspan="4" align="left"><a href="#rendering" name="rendering">Rendering</a></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>render</code></td>
|
||||
<td valign="top">
|
||||
Custom rendering functions. Each function should accept two arguments: "data" and "escape" and return HTML (string) 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.
|
||||
<table width="100%">
|
||||
<tr>
|
||||
<td valign="top"><code>option</code></td>
|
||||
<td valign="top">An option in the dropdown list of available options.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>item</code></td>
|
||||
<td valign="top">An item the user has selected.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>option_create</code></td>
|
||||
<td valign="top">The "create new" option at the bottom of the dropdown. The data contains one property: "input" (which is what the user has typed).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>optgroup_header</code></td>
|
||||
<td valign="top">The header of an option group.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><code>optgroup</code></td>
|
||||
<td valign="top">The wrapper for an optgroup. The "html" property in the data will be the raw html of the optgroup's header and options.</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
<td valign="top"><code>object</code></td>
|
||||
<td valign="top"></td>
|
||||
</tr>
|
||||
</table>
|
||||
Reference in a new issue