;
+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 '' +
+ (name ? '' + escape(name) + ' ' : '') +
+ (item.email ? '' + escape(item.email) + ' ' : '') +
+ '
';
+ },
+ option: function(item: Person, escape: (input: any) => string) {
+ var name = formatPerson(item);
+ var label = name || item.email;
+ var caption = name ? item.email : null;
+ return '' +
+ '' + escape(label) + ' ' +
+ (caption ? '' + escape(caption) + ' ' : '') +
+ '
';
+ }
+ },
+ 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 = $('#select-words-unique').selectize({
+ create: true,
+ createFilter: function(input: string) {
+ input = input.toLowerCase();
+ return $.grep( 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 '' +
+ '' + escape(data.title) + ' ' +
+ '' + escape(data.url) + ' ' +
+ '
';
+ },
+ item: function(data: Link, escape: (input: any) => string) {
+ return '';
+ }
+ },
+ create: function(input: string) {
+ return {
+ id: 0,
+ title: input,
+ url: '#'
+ };
+ }
+});
+
+
+// Events
+// --------------------------------------------------------------------------------------------------------------------
+
+var eventHandler = function(name: string) {
+ return function() {
+ console.log(name, arguments);
+ $('#log').append('' + name + '
');
+ };
+};
+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 '' +
+ '
' +
+ '' + escape(item.username) + ' ' +
+ ' ' +
+ '
' + escape(item.description) + ' ' +
+ '
' +
+ '
' + escape(item.abridged_cast[i].name) + ' ');
+ }
+ return '' +
+ '
' +
+ '
' +
+ '' + escape(item.title) + ' ' +
+ ' ' +
+ '
' + escape(item.synopsis || 'No synopsis available at this time.') + ' ' +
+ '
' + (actors.length ? 'Starring ' + actors.join(', ') : 'Actors unavailable') + ' ' +
+ '
+// Definitions: https://github.com/borisyankov/DefinitelyTyped
+
+/// {
+
+ // General
+ // ------------------------------------------------------------------------------------------------------------
+
+ /**
+ * The string to separate items by. This option is only used when Selectize is instantiated from a
+ * 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 with 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 s.
+ *
+ * Default: []
+ */
+ options?: T[];
+
+ /**
+ * The 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;
+ }
+
+ /**
+ * 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 {
+ // 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 {
+
+ // 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. ), 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): JQuery;
+}
+
+interface HTMLElement {
+ selectize: Selectize.IApi;
+}
+
 + ')
' +
+ '' +
+ '' + escape(item.title) + '' +
+ '' +
+ '' + escape(item.synopsis || 'No synopsis available at this time.') + '' +
+ '' + (actors.length ? 'Starring ' + actors.join(', ') : 'Actors unavailable') + '' +
+ '