diff --git a/selectize/selectize-tests.ts b/selectize/selectize-tests.ts index 5c75f52a41..47c6ce84a5 100644 --- a/selectize/selectize-tests.ts +++ b/selectize/selectize-tests.ts @@ -98,10 +98,16 @@ $('#input-tags').selectize({ // 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 formatName = function(item) { - return $.trim((item.first_name || '') + ' ' + (item.last_name || '')); +var formatPerson = function(name: Person) { + return $.trim((name.first_name || '') + ' ' + (name.last_name || '')); }; $('#select-to').selectize({ @@ -120,15 +126,15 @@ $('#select-to').selectize({ {email: 'someone@gmail.com'} ], render: { - item: function(item, escape) { - var name = formatName(item); + item: function(item: Person, escape) { + var name = formatPerson(item); return '
' + (name ? '' + escape(name) + '' : '') + (item.email ? '' + escape(item.email) + '' : '') + '
'; }, - option: function(item, escape) { - var name = formatName(item); + option: function(item: Person, escape) { + var name = formatPerson(item); var label = name || item.email; var caption = name ? item.email : null; return '
' + @@ -137,12 +143,12 @@ $('#select-to').selectize({ '
'; } }, - createFilter: function(input) { + 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): any { + create: function(input: string): any { if ((new RegExp('^' + REGEX_EMAIL + '$', 'i')).test(input)) { return {email: input}; } @@ -173,11 +179,11 @@ $('#select-words-regex').selectize({ }); $('#select-words-length').selectize({ create: true, - createFilter: function(input) { return input.length >= parseInt($('#length').val(), 10); } + createFilter: function(input: string) { return input.length >= parseInt($('#length').val(), 10); } }); var unique: Selectize.IApi = $('#select-words-unique').selectize({ create: true, - createFilter: function(input) { + createFilter: function(input: string) { input = input.toLowerCase(); return $.grep( unique.getValue(), function(value) { return value.toLowerCase() === input; @@ -189,6 +195,11 @@ var unique: Selectize.IApi = $('#select-words-unique').selectize // Customization example // -------------------------------------------------------------------------------------------------------------------- +interface Link { + title: string; + url: string; +} + $('#select-links').selectize({ theme: 'links', maxItems: null, @@ -200,17 +211,17 @@ $('#select-links').selectize({ {id: 3, title: 'Yahoo', url: 'http://yahoo.com'}, ], render: { - option: function(data, escape) { + option: function(data: Link, escape) { return '
' + '' + escape(data.title) + '' + '' + escape(data.url) + '' + '
'; }, - item: function(data, escape) { + item: function(data: Link, escape) { return ''; } }, - create: function(input) { + create: function(input: string) { return { id: 0, title: input, diff --git a/selectize/selectize.d.ts b/selectize/selectize.d.ts index 5d0c755856..bf3950941c 100644 --- a/selectize/selectize.d.ts +++ b/selectize/selectize.d.ts @@ -335,21 +335,21 @@ declare module Selectize { */ interface ICustomRenderers { // An option in the dropdown list of available options. - option?(data: U, escape: (string) => string): string; + option?(data: U, escape: (input: string) => string): string; // An item the user has selected. - item?(data: U, escape: (string) => string): string; + 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: (string) => string): string; + option_create?(data: U, escape: (input: string) => string): string; // The header of an option group. - optgroup_header?(data: U, escape: (string) => string): string; + 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: (string) => string): string; + optgroup?(data: U, escape: (input: string) => string): string; } // see https://github.com/brianreavis/selectize.js/blob/master/docs/api.md