mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-08-12 13:00:19 +00:00
Merge pull request #3265 from adidahiya/selectize
Add selectize.js typings
This commit is contained in:
Masahiro Wakame
@@ -0,0 +1,410 @@
|
||||
/// <reference path="../jquery/jquery.d.ts" />
|
||||
/// <reference path="selectize.d.ts" />
|
||||
|
||||
// All code examples taken from https://github.com/brianreavis/selectize.js/blob/master/examples
|
||||
|
||||
// API example
|
||||
// --------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
var $select = $('#select-tools').selectize({
|
||||
maxItems: null,
|
||||
valueField: 'id',
|
||||
labelField: 'title',
|
||||
searchField: 'title',
|
||||
options: [
|
||||
{id: 1, title: 'Spectrometer', url: 'http://en.wikipedia.org/wiki/Spectrometers'},
|
||||
{id: 2, title: 'Star Chart', url: 'http://en.wikipedia.org/wiki/Star_chart'},
|
||||
{id: 3, title: 'Electrical Tape', url: 'http://en.wikipedia.org/wiki/Electrical_tape'}
|
||||
],
|
||||
create: false
|
||||
});
|
||||
|
||||
var control = $select[0].selectize;
|
||||
|
||||
$('#button-clear').on('click', function() {
|
||||
control.clear();
|
||||
});
|
||||
$('#button-clearoptions').on('click', function() {
|
||||
control.clearOptions();
|
||||
});
|
||||
$('#button-addoption').on('click', function() {
|
||||
control.addOption({
|
||||
id: 4,
|
||||
title: 'Something New',
|
||||
url: 'http://google.com'
|
||||
});
|
||||
});
|
||||
$('#button-additem').on('click', function() {
|
||||
control.addItem(2);
|
||||
});
|
||||
$('#button-setvalue').on('click', function() {
|
||||
control.setValue([2, 3]);
|
||||
});
|
||||
|
||||
|
||||
// Cities example
|
||||
// --------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
var xhr: XMLHttpRequest;
|
||||
var select_state: Selectize.IApi<string, any>;
|
||||
var select_city: Selectize.IApi<string, any>;
|
||||
var $select_state: JQuery;
|
||||
var $select_city: JQuery;
|
||||
|
||||
$select_state = $('#select-state').selectize({
|
||||
onChange: function(value) {
|
||||
if (!value.length) return;
|
||||
select_city.disable();
|
||||
select_city.clearOptions();
|
||||
select_city.load(function(callback) {
|
||||
xhr && xhr.abort();
|
||||
xhr = $.ajax({
|
||||
url: 'http://www.corsproxy.com/api.sba.gov/geodata/primary_city_links_for_state_of/' + value + '.json',
|
||||
success: function(results) {
|
||||
select_city.enable();
|
||||
callback(results);
|
||||
},
|
||||
error: function() {
|
||||
callback();
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$select_city = $('#select-city').selectize({
|
||||
valueField: 'name',
|
||||
labelField: 'name',
|
||||
searchField: ['name']
|
||||
});
|
||||
|
||||
select_city = $select_city[0].selectize;
|
||||
select_state = $select_state[0].selectize;
|
||||
select_city.disable();
|
||||
|
||||
|
||||
// Confirm example
|
||||
// --------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
$('#input-tags').selectize({
|
||||
delimiter: ',',
|
||||
persist: false,
|
||||
onDelete: function(values) {
|
||||
return confirm(values.length > 1 ? 'Are you sure you want to remove these ' + values.length + ' items?' : 'Are you sure you want to remove "' + values[0] + '"?');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Contacts example
|
||||
// --------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
interface Person {
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
email: string;
|
||||
}
|
||||
|
||||
var REGEX_EMAIL = '([a-z0-9!#$%&\'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&\'*+/=?^_`{|}~-]+)*@' +
|
||||
'(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?)';
|
||||
var formatPerson = (name: Person) => {
|
||||
return $.trim((name.first_name || '') + ' ' + (name.last_name || ''));
|
||||
};
|
||||
|
||||
$('#select-to').selectize({
|
||||
persist: false,
|
||||
maxItems: null,
|
||||
valueField: 'email',
|
||||
labelField: 'name',
|
||||
searchField: ['first_name', 'last_name', 'email'],
|
||||
sortField: [
|
||||
{field: 'first_name', direction: 'asc'},
|
||||
{field: 'last_name', direction: 'asc'}
|
||||
],
|
||||
options: [
|
||||
{email: 'nikola@tesla.com', first_name: 'Nikola', last_name: 'Tesla'},
|
||||
{email: 'brian@thirdroute.com', first_name: 'Brian', last_name: 'Reavis'},
|
||||
{email: 'someone@gmail.com'}
|
||||
],
|
||||
render: {
|
||||
item: function(item: Person, escape: (input: any) => string) {
|
||||
var name = formatPerson(item);
|
||||
return '<div>' +
|
||||
(name ? '<span class="name">' + escape(name) + '</span>' : '') +
|
||||
(item.email ? '<span class="email">' + escape(item.email) + '</span>' : '') +
|
||||
'</div>';
|
||||
},
|
||||
option: function(item: Person, escape: (input: any) => string) {
|
||||
var name = formatPerson(item);
|
||||
var label = name || item.email;
|
||||
var caption = name ? item.email : null;
|
||||
return '<div>' +
|
||||
'<span class="label">' + escape(label) + '</span>' +
|
||||
(caption ? '<span class="caption">' + escape(caption) + '</span>' : '') +
|
||||
'</div>';
|
||||
}
|
||||
},
|
||||
createFilter: function(input: string) {
|
||||
var regexpA = new RegExp('^' + REGEX_EMAIL + '$', 'i');
|
||||
var regexpB = new RegExp('^([^<]*)\<' + REGEX_EMAIL + '\>$', 'i');
|
||||
return regexpA.test(input) || regexpB.test(input);
|
||||
},
|
||||
create: function(input: string): any {
|
||||
if ((new RegExp('^' + REGEX_EMAIL + '$', 'i')).test(input)) {
|
||||
return {email: input};
|
||||
}
|
||||
var match = input.match(new RegExp('^([^<]*)\<' + REGEX_EMAIL + '\>$', 'i'));
|
||||
if (match) {
|
||||
var name = $.trim(match[1]);
|
||||
var pos_space = name.indexOf(' ');
|
||||
var first_name = name.substring(0, pos_space);
|
||||
var last_name = name.substring(pos_space + 1);
|
||||
return {
|
||||
email: match[2],
|
||||
first_name: first_name,
|
||||
last_name: last_name
|
||||
};
|
||||
}
|
||||
alert('Invalid email address.');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Create filter example
|
||||
// --------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
$('#select-words-regex').selectize({
|
||||
create: true,
|
||||
createFilter: $('#regex').val()
|
||||
});
|
||||
$('#select-words-length').selectize({
|
||||
create: true,
|
||||
createFilter: function(input: string) { return input.length >= parseInt($('#length').val(), 10); }
|
||||
});
|
||||
var unique: Selectize.IApi<string, string> = $('#select-words-unique').selectize({
|
||||
create: true,
|
||||
createFilter: function(input: string) {
|
||||
input = input.toLowerCase();
|
||||
return $.grep(<string[]> unique.getValue(), function(value) {
|
||||
return value.toLowerCase() === input;
|
||||
}).length == 0;
|
||||
}
|
||||
})[0].selectize;
|
||||
|
||||
|
||||
// Customization example
|
||||
// --------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
interface Link {
|
||||
title: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
$('#select-links').selectize({
|
||||
theme: 'links',
|
||||
maxItems: null,
|
||||
valueField: 'id',
|
||||
searchField: 'title',
|
||||
options: [
|
||||
{id: 1, title: 'DIY', url: 'https://diy.org'},
|
||||
{id: 2, title: 'Google', url: 'http://google.com'},
|
||||
{id: 3, title: 'Yahoo', url: 'http://yahoo.com'},
|
||||
],
|
||||
render: {
|
||||
option: function(data: Link, escape: (input: any) => string) {
|
||||
return '<div class="option">' +
|
||||
'<span class="title">' + escape(data.title) + '</span>' +
|
||||
'<span class="url">' + escape(data.url) + '</span>' +
|
||||
'</div>';
|
||||
},
|
||||
item: function(data: Link, escape: (input: any) => string) {
|
||||
return '<div class="item"><a href="' + escape(data.url) + '">' + escape(data.title) + '</a></div>';
|
||||
}
|
||||
},
|
||||
create: function(input: string) {
|
||||
return {
|
||||
id: 0,
|
||||
title: input,
|
||||
url: '#'
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Events
|
||||
// --------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
var eventHandler = function(name: string) {
|
||||
return function() {
|
||||
console.log(name, arguments);
|
||||
$('#log').append('<div><span class="name">' + name + '</span></div>');
|
||||
};
|
||||
};
|
||||
var $select = $('#select-state').selectize({
|
||||
create : true,
|
||||
onChange : eventHandler('onChange'),
|
||||
onItemAdd : eventHandler('onItemAdd'),
|
||||
onItemRemove : eventHandler('onItemRemove'),
|
||||
onOptionAdd : eventHandler('onOptionAdd'),
|
||||
onOptionRemove : eventHandler('onOptionRemove'),
|
||||
onDropdownOpen : eventHandler('onDropdownOpen'),
|
||||
onDropdownClose : eventHandler('onDropdownClose'),
|
||||
onInitialize : eventHandler('onInitialize'),
|
||||
});
|
||||
|
||||
|
||||
// Github example
|
||||
// --------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
interface Repository {
|
||||
fork: string;
|
||||
name: string;
|
||||
description: string;
|
||||
language: string;
|
||||
watchers: number;
|
||||
forks: string;
|
||||
username: string;
|
||||
}
|
||||
|
||||
$('#select-repo').selectize({
|
||||
valueField: 'url',
|
||||
labelField: 'name',
|
||||
searchField: 'name',
|
||||
options: [],
|
||||
create: false,
|
||||
render: {
|
||||
option: function(item: Repository, escape: (input: any) => string) {
|
||||
return '<div>' +
|
||||
'<span class="title">' +
|
||||
'<span class="name"><i class="icon ' + (item.fork ? 'fork' : 'source') + '"></i>' + escape(item.name) + '</span>' +
|
||||
'<span class="by">' + escape(item.username) + '</span>' +
|
||||
'</span>' +
|
||||
'<span class="description">' + escape(item.description) + '</span>' +
|
||||
'<ul class="meta">' +
|
||||
(item.language ? '<li class="language">' + escape(item.language) + '</li>' : '') +
|
||||
'<li class="watchers"><span>' + escape(item.watchers) + '</span> watchers</li>' +
|
||||
'<li class="forks"><span>' + escape(item.forks) + '</span> forks</li>' +
|
||||
'</ul>' +
|
||||
'</div>';
|
||||
}
|
||||
},
|
||||
score: function(search) {
|
||||
var score = this.getScoreFunction(search);
|
||||
return function(item: Repository) {
|
||||
return score(item) * (1 + Math.min(item.watchers / 100, 1));
|
||||
};
|
||||
},
|
||||
load: function(query, callback) {
|
||||
if (!query.length) return callback();
|
||||
$.ajax({
|
||||
url: 'https://api.github.com/legacy/repos/search/' + encodeURIComponent(query),
|
||||
type: 'GET',
|
||||
error: function() {
|
||||
callback();
|
||||
},
|
||||
success: function(res) {
|
||||
callback(res.repositories.slice(0, 10));
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Lock example
|
||||
// --------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
$('select').selectize({create: true});
|
||||
$('#select-locked-empty')[0].selectize.lock();
|
||||
$('#select-locked-single')[0].selectize.lock();
|
||||
$('#select-locked')[0].selectize.lock();
|
||||
|
||||
|
||||
// Movies example
|
||||
// --------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
$('#select-movie').selectize({
|
||||
valueField: 'title',
|
||||
labelField: 'title',
|
||||
searchField: 'title',
|
||||
options: [],
|
||||
create: false,
|
||||
render: {
|
||||
option: function(item, escape) {
|
||||
var actors: any[] = [];
|
||||
for (var i = 0, n = item.abridged_cast.length; i < n; i++) {
|
||||
actors.push('<span>' + escape(item.abridged_cast[i].name) + '</span>');
|
||||
}
|
||||
return '<div>' +
|
||||
'<img src="' + escape(item.posters.thumbnail) + '" alt="">' +
|
||||
'<span class="title">' +
|
||||
'<span class="name">' + escape(item.title) + '</span>' +
|
||||
'</span>' +
|
||||
'<span class="description">' + escape(item.synopsis || 'No synopsis available at this time.') + '</span>' +
|
||||
'<span class="actors">' + (actors.length ? 'Starring ' + actors.join(', ') : 'Actors unavailable') + '</span>' +
|
||||
'</div>';
|
||||
}
|
||||
},
|
||||
load: function(query, callback) {
|
||||
if (!query.length) return callback();
|
||||
$.ajax({
|
||||
url: 'http://api.rottentomatoes.com/api/public/v1.0/movies.json',
|
||||
type: 'GET',
|
||||
dataType: 'jsonp',
|
||||
data: {
|
||||
q: query,
|
||||
page_limit: 10,
|
||||
apikey: '3qqmdwbuswut94jv4eua3j85'
|
||||
},
|
||||
error: function() {
|
||||
callback();
|
||||
},
|
||||
success: function(res) {
|
||||
console.log(res.movies);
|
||||
callback(res.movies);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Optgroups
|
||||
// --------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
$("#select-car").selectize({
|
||||
options: [
|
||||
{id: 'avenger', make: 'dodge', model: 'Avenger'},
|
||||
{id: 'caliber', make: 'dodge', model: 'Caliber'},
|
||||
{id: 'caravan-grand-passenger', make: 'dodge', model: 'Caravan Grand Passenger'},
|
||||
{id: 'challenger', make: 'dodge', model: 'Challenger'},
|
||||
{id: 'ram-1500', make: 'dodge', model: 'Ram 1500'},
|
||||
{id: 'viper', make: 'dodge', model: 'Viper'},
|
||||
{id: 'a3', make: 'audi', model: 'A3'},
|
||||
{id: 'a6', make: 'audi', model: 'A6'},
|
||||
{id: 'r8', make: 'audi', model: 'R8'},
|
||||
{id: 'rs-4', make: 'audi', model: 'RS 4'},
|
||||
{id: 's4', make: 'audi', model: 'S4'},
|
||||
{id: 's8', make: 'audi', model: 'S8'},
|
||||
{id: 'tt', make: 'audi', model: 'TT'},
|
||||
{id: 'avalanche', make: 'chevrolet', model: 'Avalanche'},
|
||||
{id: 'aveo', make: 'chevrolet', model: 'Aveo'},
|
||||
{id: 'cobalt', make: 'chevrolet', model: 'Cobalt'},
|
||||
{id: 'silverado', make: 'chevrolet', model: 'Silverado'},
|
||||
{id: 'suburban', make: 'chevrolet', model: 'Suburban'},
|
||||
{id: 'tahoe', make: 'chevrolet', model: 'Tahoe'},
|
||||
{id: 'trail-blazer', make: 'chevrolet', model: 'TrailBlazer'},
|
||||
],
|
||||
optgroups: [
|
||||
{id: 'dodge', name: 'Dodge'},
|
||||
{id: 'audi', name: 'Audi'},
|
||||
{id: 'chevrolet', name: 'Chevrolet'}
|
||||
],
|
||||
labelField: 'model',
|
||||
valueField: 'id',
|
||||
optgroupField: 'make',
|
||||
optgroupLabelField: 'name',
|
||||
optgroupValueField: 'id',
|
||||
optgroupOrder: ['chevrolet', 'dodge', 'audi'],
|
||||
searchField: ['model'],
|
||||
plugins: ['optgroup_columns'],
|
||||
openOnFocus: false
|
||||
});
|
||||
|
||||
Vendored
+600
@@ -0,0 +1,600 @@
|
||||
// Type definitions for Selectize 0.11.2
|
||||
// Project: https://github.com/brianreavis/selectize.js
|
||||
// Definitions by: Adi Dahiya <https://github.com/adidahiya>
|
||||
// Definitions: https://github.com/borisyankov/DefinitelyTyped
|
||||
|
||||
/// <reference path="../jquery/jquery.d.ts"/>
|
||||
|
||||
declare module Selectize {
|
||||
// see https://github.com/brianreavis/selectize.js/blob/master/docs/usage.md
|
||||
// option identifiers are parameterized by T; data is parameterized by U
|
||||
interface IOptions<T, U> {
|
||||
|
||||
// General
|
||||
// ------------------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* The string to separate items by. This option is only used when Selectize is instantiated from a
|
||||
* <input type="text"> element.
|
||||
*
|
||||
* Default: ','
|
||||
*/
|
||||
delimiter?: string;
|
||||
|
||||
/**
|
||||
* Enable or disable international character support.
|
||||
*
|
||||
* Default: true
|
||||
*/
|
||||
diacritics?: boolean;
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*
|
||||
* Default: false
|
||||
*/
|
||||
create?: any;
|
||||
|
||||
/**
|
||||
* 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).
|
||||
*
|
||||
* Default: false
|
||||
*/
|
||||
createOnBlur?: boolean;
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*
|
||||
* Default: null
|
||||
*/
|
||||
createFilter?: any;
|
||||
|
||||
/**
|
||||
* Toggles match highlighting within the dropdown menu.
|
||||
*
|
||||
* Default: true
|
||||
*/
|
||||
highlight?: boolean;
|
||||
|
||||
/**
|
||||
* If false, items created by the user will not show up as available options once they are unselected.
|
||||
*
|
||||
* Default: true
|
||||
*/
|
||||
persist?: boolean;
|
||||
|
||||
/**
|
||||
* Show the dropdown immediately when the control receives focus.
|
||||
*
|
||||
* Default: true
|
||||
*/
|
||||
openOnFocus?: boolean;
|
||||
|
||||
/**
|
||||
* The max number of items to render at once in the dropdown list of options.
|
||||
*
|
||||
* Default: 1000
|
||||
*/
|
||||
maxOptions?: number;
|
||||
|
||||
/**
|
||||
* The max number of items the user can select.
|
||||
*
|
||||
* Default: Infinity
|
||||
*/
|
||||
maxItems?: number;
|
||||
|
||||
/**
|
||||
* If true, the items that are currently selected will not be shown in the dropdown list of available options.
|
||||
*
|
||||
* Default: false
|
||||
*/
|
||||
hideSelected?: boolean;
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*
|
||||
* Default: false
|
||||
*/
|
||||
allowEmptyOption?: boolean;
|
||||
|
||||
/**
|
||||
* The animation duration (in milliseconds) of the scroll animation triggered when going [up] and [down] in
|
||||
* the options dropdown.
|
||||
*
|
||||
* Default: 60
|
||||
*/
|
||||
scrollDuration?: number;
|
||||
|
||||
/**
|
||||
* The number of milliseconds to wait before requesting options from the server or null.
|
||||
* If null, throttling is disabled.
|
||||
*
|
||||
* Default: 300
|
||||
*/
|
||||
loadThrottle?: number;
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*
|
||||
* Default: false
|
||||
*/
|
||||
preload?: any;
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*
|
||||
* Default: null
|
||||
*/
|
||||
dropdownParent?: string;
|
||||
|
||||
/**
|
||||
* Sets if the "Add..." option should be the default selection in the dropdown.
|
||||
*
|
||||
* Default: false
|
||||
*/
|
||||
addPrecedence?: boolean;
|
||||
|
||||
/**
|
||||
* If true, the tab key will choose the currently selected item.
|
||||
*
|
||||
* Default: false
|
||||
*/
|
||||
selectOnTab?: boolean;
|
||||
|
||||
// Data / Searching
|
||||
// ------------------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Options available to select; array of objects. If your element is <select> with <option>s specified this
|
||||
* property gets populated accordingly. Setting this property is convenient if you have your data as an
|
||||
* array and want to automatically generate the <option>s.
|
||||
*
|
||||
* Default: []
|
||||
*/
|
||||
options?: T[];
|
||||
|
||||
/**
|
||||
* The <option> attribute from which to read JSON data about the option.
|
||||
*
|
||||
* Default: "data-data"
|
||||
*/
|
||||
dataAttr?: string;
|
||||
|
||||
/**
|
||||
* The name of the property to use as the "value" when an item is selected.
|
||||
*
|
||||
* Default: "value"
|
||||
*/
|
||||
valueField?: string;
|
||||
|
||||
/**
|
||||
* The name of the option group property that serves as its unique identifier.
|
||||
*
|
||||
* Default: "value"
|
||||
*/
|
||||
optgroupValueField?: string;
|
||||
|
||||
/**
|
||||
* The name of the property to render as an option / item label (not needed when custom rendering
|
||||
* functions are defined).
|
||||
*
|
||||
* Default: "text"
|
||||
*/
|
||||
labelField?: string;
|
||||
|
||||
/**
|
||||
* The name of the property to render as an option group label (not needed when custom rendering
|
||||
* functions are defined).
|
||||
*
|
||||
* Default: "label"
|
||||
*/
|
||||
optgroupLabelField?: string;
|
||||
|
||||
/**
|
||||
* The name of the property to group items by.
|
||||
*
|
||||
* Default: "optgroup"
|
||||
*/
|
||||
optgroupField?: string;
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*
|
||||
* 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).
|
||||
*
|
||||
* Default: "$order"
|
||||
*/
|
||||
sortField?: any;
|
||||
|
||||
/**
|
||||
* An array of property names to analyze when filtering options.
|
||||
*
|
||||
* Default: ["text"]
|
||||
*/
|
||||
searchField?: any;
|
||||
|
||||
/**
|
||||
* When searching for multiple terms (separated by a space), this is the operator used. Can be "and" or "or".
|
||||
*
|
||||
* Default: "and"
|
||||
*/
|
||||
searchConjunction?: string;
|
||||
|
||||
/**
|
||||
* An array of optgroup values that indicates the order they should be listed in in the dropdown.
|
||||
* If not provided, groups will be ordered by the ranking of the options within them.
|
||||
*
|
||||
* Default: null
|
||||
*/
|
||||
optgroupOrder?: string[];
|
||||
|
||||
/**
|
||||
* Copy the original input classes to the Dropdown element.
|
||||
*
|
||||
* Default: true
|
||||
*/
|
||||
copyClassesToDropdown?: boolean;
|
||||
|
||||
// Callbacks
|
||||
// ------------------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Invoked when new options should be loaded from the server.
|
||||
*/
|
||||
load?(query: string, callback: Function): any;
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
score?(search: ISearch): (item: any) => number;
|
||||
|
||||
/**
|
||||
* Invoked once the control is completely initialized.
|
||||
*/
|
||||
onInitialize?(): any;
|
||||
|
||||
/**
|
||||
* Invoked when the value of the control changes.
|
||||
*/
|
||||
onChange?(value: T): any;
|
||||
|
||||
/**
|
||||
* Invoked when an item is selected.
|
||||
*/
|
||||
onItemAdd?(value: T, item: JQuery): any;
|
||||
|
||||
/**
|
||||
* Invoked when an item is deselected.
|
||||
*/
|
||||
onItemRemove?(value: T): any;
|
||||
|
||||
/**
|
||||
* Invoked when the control is manually cleared via the clear() method.
|
||||
*/
|
||||
onClear?(): any;
|
||||
|
||||
/**
|
||||
* Invoked when the user attempts to delete the current selection.
|
||||
*/
|
||||
onDelete?(values: T[]): any;
|
||||
|
||||
/**
|
||||
* Invoked when a new option is added to the available options list.
|
||||
*/
|
||||
onOptionAdd?(value: T, data: U): any;
|
||||
|
||||
/**
|
||||
* Invoked when an option is removed from the available options.
|
||||
*/
|
||||
onOptionRemove?(value: T): any;
|
||||
|
||||
/**
|
||||
* Invoked when the dropdown opens.
|
||||
*/
|
||||
onDropdownOpen?(dropdown: JQuery): any;
|
||||
|
||||
/**
|
||||
* Invoked when the dropdown closes.
|
||||
*/
|
||||
onDropdownClose?(dropdown: JQuery): any;
|
||||
|
||||
/**
|
||||
* Invoked when the user types while filtering options.
|
||||
*/
|
||||
onType?(srt: string): any;
|
||||
|
||||
/**
|
||||
* Invoked when new options have been loaded and added to the control (via the "load" option or "load" API method).
|
||||
*/
|
||||
onLoad?(data: U): any;
|
||||
|
||||
// Rendering
|
||||
// ------------------------------------------------------------------------------------------------------------
|
||||
|
||||
render?: ICustomRenderers<U>;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
interface ICustomRenderers<U> {
|
||||
// An option in the dropdown list of available options.
|
||||
option?(data: U, escape: (input: string) => string): string;
|
||||
|
||||
// An item the user has selected.
|
||||
item?(data: U, escape: (input: string) => string): string;
|
||||
|
||||
// The "create new" option at the bottom of the dropdown. The data contains one property: "input"
|
||||
// (which is what the user has typed).
|
||||
option_create?(data: U, escape: (input: string) => string): string;
|
||||
|
||||
// The header of an option group.
|
||||
optgroup_header?(data: U, escape: (input: string) => string): string;
|
||||
|
||||
// The wrapper for an optgroup. The "html" property in the data will be the raw html of the optgroup's header
|
||||
// and options.
|
||||
optgroup?(data: U, escape: (input: string) => string): string;
|
||||
}
|
||||
|
||||
// see https://github.com/brianreavis/selectize.js/blob/master/docs/api.md
|
||||
interface IApi<T, U> {
|
||||
|
||||
// Dropdown Options
|
||||
// ------------------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Adds an available option. If it already exists, nothing will happen.
|
||||
* Note: this does not refresh the options list dropdown (use refreshOptions() for that).
|
||||
*/
|
||||
addOption(data: U): void;
|
||||
|
||||
/**
|
||||
* Updates an option available for selection. If it is visible in the selected items or options dropdown,
|
||||
* it will be re-rendered automatically.
|
||||
*/
|
||||
updateOption(value: T, data: U): void;
|
||||
|
||||
/**
|
||||
* Removes the option identified by the given value.
|
||||
*/
|
||||
removeOption(value: T): void;
|
||||
|
||||
/**
|
||||
* Removes all options from the control.
|
||||
*/
|
||||
clearOptions(): void;
|
||||
|
||||
/**
|
||||
* Retrieves the jQuery element for the option identified by the given value.
|
||||
*/
|
||||
getOption(value: T): any;
|
||||
|
||||
/**
|
||||
* 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".
|
||||
*/
|
||||
getAdjacentOption(value: T, direction: number): void;
|
||||
|
||||
/**
|
||||
* Refreshes the list of available options shown in the autocomplete dropdown menu.
|
||||
*/
|
||||
refreshOptions(triggerDropdown: boolean): void;
|
||||
|
||||
// Selected Items
|
||||
// ------------------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Resets / clears all selected items from the control.
|
||||
*/
|
||||
clear(): void;
|
||||
|
||||
/**
|
||||
* Returns the jQuery element of the item matching the given value.
|
||||
*/
|
||||
getItem(value: T): JQuery;
|
||||
|
||||
/**
|
||||
* "Selects" an item. Adds it to the list at the current caret position.
|
||||
*/
|
||||
addItem(value: T): void;
|
||||
|
||||
/**
|
||||
* Removes the selected item matching the provided value.
|
||||
*/
|
||||
removeItem(value: T): void;
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
createItem(value: T): void;
|
||||
|
||||
/**
|
||||
* Re-renders the selected item lists.
|
||||
*/
|
||||
refreshItems(): void;
|
||||
|
||||
// Optgroups
|
||||
// ------------------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
addOptionGroup(id: string, data: U): void;
|
||||
|
||||
// Events
|
||||
// ------------------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Adds an event listener.
|
||||
*/
|
||||
on(eventName: string, handler: (event: JQueryEventObject) => any): void;
|
||||
|
||||
/**
|
||||
* Removes an event listener.
|
||||
*/
|
||||
off(eventName: string, handler: (event: JQueryEventObject) => any): void;
|
||||
|
||||
/**
|
||||
* Removes all event listeners.
|
||||
*/
|
||||
off(eventName: string): void;
|
||||
|
||||
/**
|
||||
* Triggers event listeners.
|
||||
*/
|
||||
trigger(eventName: string, ...args: any[]): void;
|
||||
|
||||
// Dropdown Actions
|
||||
// ------------------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Shows the autocomplete dropdown containing the available options.
|
||||
*/
|
||||
open(): void;
|
||||
|
||||
/**
|
||||
* Closes the autocomplete dropdown menu.
|
||||
*/
|
||||
close(): void;
|
||||
|
||||
/**
|
||||
* Calculates and applies the appropriate position of the dropdown.
|
||||
*/
|
||||
positionDropdown(): void;
|
||||
|
||||
// Other
|
||||
// ------------------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Destroys the control and unbinds event listeners so that it can be garbage collected.
|
||||
*/
|
||||
destroy(): void;
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
load(callback: (results: any) => any): void;
|
||||
|
||||
/**
|
||||
* Brings the control into focus.
|
||||
*/
|
||||
focus(): void;
|
||||
|
||||
/**
|
||||
* Forces the control out of focus.
|
||||
*/
|
||||
blur(): void;
|
||||
|
||||
/**
|
||||
* Disables user input on the control (note: the control can still receive focus).
|
||||
*/
|
||||
lock(): void;
|
||||
|
||||
/**
|
||||
* Re-enables user input on the control.
|
||||
*/
|
||||
unlock(): void;
|
||||
|
||||
/**
|
||||
* Disables user input on the control completely. While disabled, it cannot receive focus.
|
||||
*/
|
||||
disable(): void;
|
||||
|
||||
/**
|
||||
* Enables the control so that it can respond to focus and user input.
|
||||
*/
|
||||
enable(): void;
|
||||
|
||||
/**
|
||||
* Returns the value of the control. If multiple items can be selected (e.g. <select multiple>), this
|
||||
* returns an array. If only one item can be selected, this returns a string.
|
||||
*/
|
||||
getValue(): any;
|
||||
|
||||
/**
|
||||
* Resets the selected items to the given value.
|
||||
*/
|
||||
setValue(value: T): void;
|
||||
setValue(value: T[]): void;
|
||||
|
||||
/**
|
||||
* Moves the caret to the specified position ("index" being the index in the list of selected items).
|
||||
*/
|
||||
setCaret(index: number): void;
|
||||
|
||||
/**
|
||||
* Returns whether or not the user can select more items.
|
||||
*/
|
||||
isFull(): boolean;
|
||||
|
||||
/**
|
||||
* Clears the render cache. Takes an optional template argument (e.g. "option", "item") to clear only that cache.
|
||||
*/
|
||||
clearCache(template?: string): void;
|
||||
}
|
||||
|
||||
interface ISearchToken {
|
||||
regex: RegExp;
|
||||
string: string;
|
||||
}
|
||||
|
||||
interface ISearchResult {
|
||||
id: string;
|
||||
score: number;
|
||||
}
|
||||
|
||||
interface ISearch {
|
||||
/**
|
||||
* Original search options.
|
||||
*/
|
||||
options: any;
|
||||
|
||||
/**
|
||||
* The raw user input
|
||||
*/
|
||||
query: string;
|
||||
|
||||
/**
|
||||
* An array containing parsed search tokens. A token is an object containing two properties: "string" and "regex".
|
||||
*/
|
||||
tokens: ISearchToken[];
|
||||
|
||||
/**
|
||||
* The total number of results.
|
||||
*/
|
||||
total: number;
|
||||
|
||||
/**
|
||||
* A list of matched results. Each result is an object containing two properties: "score" and "id".
|
||||
*/
|
||||
items: ISearchResult[];
|
||||
}
|
||||
}
|
||||
|
||||
interface JQuery {
|
||||
selectize(options?: Selectize.IOptions<any, any>): JQuery;
|
||||
}
|
||||
|
||||
interface HTMLElement {
|
||||
selectize: Selectize.IApi<any, any>;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user