Diligent web site
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

selectize.js 91KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484
  1. /**
  2. * sifter.js
  3. * Copyright (c) 2013 Brian Reavis & contributors
  4. *
  5. * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
  6. * file except in compliance with the License. You may obtain a copy of the License at:
  7. * http://www.apache.org/licenses/LICENSE-2.0
  8. *
  9. * Unless required by applicable law or agreed to in writing, software distributed under
  10. * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
  11. * ANY KIND, either express or implied. See the License for the specific language
  12. * governing permissions and limitations under the License.
  13. *
  14. * @author Brian Reavis <[email protected]>
  15. */
  16. (function(root, factory) {
  17. if (typeof define === 'function' && define.amd) {
  18. define('sifter', factory);
  19. } else if (typeof exports === 'object') {
  20. module.exports = factory();
  21. } else {
  22. root.Sifter = factory();
  23. }
  24. }(this, function() {
  25. /**
  26. * Textually searches arrays and hashes of objects
  27. * by property (or multiple properties). Designed
  28. * specifically for autocomplete.
  29. *
  30. * @constructor
  31. * @param {array|object} items
  32. * @param {object} items
  33. */
  34. var Sifter = function(items, settings) {
  35. this.items = items;
  36. this.settings = settings || {diacritics: true};
  37. };
  38. /**
  39. * Splits a search string into an array of individual
  40. * regexps to be used to match results.
  41. *
  42. * @param {string} query
  43. * @returns {array}
  44. */
  45. Sifter.prototype.tokenize = function(query) {
  46. query = trim(String(query || '').toLowerCase());
  47. if (!query || !query.length) return [];
  48. var i, n, regex, letter;
  49. var tokens = [];
  50. var words = query.split(/ +/);
  51. for (i = 0, n = words.length; i < n; i++) {
  52. regex = escape_regex(words[i]);
  53. if (this.settings.diacritics) {
  54. for (letter in DIACRITICS) {
  55. if (DIACRITICS.hasOwnProperty(letter)) {
  56. regex = regex.replace(new RegExp(letter, 'g'), DIACRITICS[letter]);
  57. }
  58. }
  59. }
  60. tokens.push({
  61. string : words[i],
  62. regex : new RegExp(regex, 'i')
  63. });
  64. }
  65. return tokens;
  66. };
  67. /**
  68. * Iterates over arrays and hashes.
  69. *
  70. * ```
  71. * this.iterator(this.items, function(item, id) {
  72. * // invoked for each item
  73. * });
  74. * ```
  75. *
  76. * @param {array|object} object
  77. */
  78. Sifter.prototype.iterator = function(object, callback) {
  79. var iterator;
  80. if (is_array(object)) {
  81. iterator = Array.prototype.forEach || function(callback) {
  82. for (var i = 0, n = this.length; i < n; i++) {
  83. callback(this[i], i, this);
  84. }
  85. };
  86. } else {
  87. iterator = function(callback) {
  88. for (var key in this) {
  89. if (this.hasOwnProperty(key)) {
  90. callback(this[key], key, this);
  91. }
  92. }
  93. };
  94. }
  95. iterator.apply(object, [callback]);
  96. };
  97. /**
  98. * Returns a function to be used to score individual results.
  99. *
  100. * Good matches will have a higher score than poor matches.
  101. * If an item is not a match, 0 will be returned by the function.
  102. *
  103. * @param {object|string} search
  104. * @param {object} options (optional)
  105. * @returns {function}
  106. */
  107. Sifter.prototype.getScoreFunction = function(search, options) {
  108. var self, fields, tokens, token_count;
  109. self = this;
  110. search = self.prepareSearch(search, options);
  111. tokens = search.tokens;
  112. fields = search.options.fields;
  113. token_count = tokens.length;
  114. /**
  115. * Calculates how close of a match the
  116. * given value is against a search token.
  117. *
  118. * @param {mixed} value
  119. * @param {object} token
  120. * @return {number}
  121. */
  122. var scoreValue = function(value, token) {
  123. var score, pos;
  124. if (!value) return 0;
  125. value = String(value || '');
  126. pos = value.search(token.regex);
  127. if (pos === -1) return 0;
  128. score = token.string.length / value.length;
  129. if (pos === 0) score += 0.5;
  130. return score;
  131. };
  132. /**
  133. * Calculates the score of an object
  134. * against the search query.
  135. *
  136. * @param {object} token
  137. * @param {object} data
  138. * @return {number}
  139. */
  140. var scoreObject = (function() {
  141. var field_count = fields.length;
  142. if (!field_count) {
  143. return function() { return 0; };
  144. }
  145. if (field_count === 1) {
  146. return function(token, data) {
  147. return scoreValue(data[fields[0]], token);
  148. };
  149. }
  150. return function(token, data) {
  151. for (var i = 0, sum = 0; i < field_count; i++) {
  152. sum += scoreValue(data[fields[i]], token);
  153. }
  154. return sum / field_count;
  155. };
  156. })();
  157. if (!token_count) {
  158. return function() { return 0; };
  159. }
  160. if (token_count === 1) {
  161. return function(data) {
  162. return scoreObject(tokens[0], data);
  163. };
  164. }
  165. if (search.options.conjunction === 'and') {
  166. return function(data) {
  167. var score;
  168. for (var i = 0, sum = 0; i < token_count; i++) {
  169. score = scoreObject(tokens[i], data);
  170. if (score <= 0) return 0;
  171. sum += score;
  172. }
  173. return sum / token_count;
  174. };
  175. } else {
  176. return function(data) {
  177. for (var i = 0, sum = 0; i < token_count; i++) {
  178. sum += scoreObject(tokens[i], data);
  179. }
  180. return sum / token_count;
  181. };
  182. }
  183. };
  184. /**
  185. * Returns a function that can be used to compare two
  186. * results, for sorting purposes. If no sorting should
  187. * be performed, `null` will be returned.
  188. *
  189. * @param {string|object} search
  190. * @param {object} options
  191. * @return function(a,b)
  192. */
  193. Sifter.prototype.getSortFunction = function(search, options) {
  194. var i, n, self, field, fields, fields_count, multiplier, multipliers, get_field, implicit_score, sort;
  195. self = this;
  196. search = self.prepareSearch(search, options);
  197. sort = (!search.query && options.sort_empty) || options.sort;
  198. /**
  199. * Fetches the specified sort field value
  200. * from a search result item.
  201. *
  202. * @param {string} name
  203. * @param {object} result
  204. * @return {mixed}
  205. */
  206. get_field = function(name, result) {
  207. if (name === '$score') return result.score;
  208. return self.items[result.id][name];
  209. };
  210. // parse options
  211. fields = [];
  212. if (sort) {
  213. for (i = 0, n = sort.length; i < n; i++) {
  214. if (search.query || sort[i].field !== '$score') {
  215. fields.push(sort[i]);
  216. }
  217. }
  218. }
  219. // the "$score" field is implied to be the primary
  220. // sort field, unless it's manually specified
  221. if (search.query) {
  222. implicit_score = true;
  223. for (i = 0, n = fields.length; i < n; i++) {
  224. if (fields[i].field === '$score') {
  225. implicit_score = false;
  226. break;
  227. }
  228. }
  229. if (implicit_score) {
  230. fields.unshift({field: '$score', direction: 'desc'});
  231. }
  232. } else {
  233. for (i = 0, n = fields.length; i < n; i++) {
  234. if (fields[i].field === '$score') {
  235. fields.splice(i, 1);
  236. break;
  237. }
  238. }
  239. }
  240. multipliers = [];
  241. for (i = 0, n = fields.length; i < n; i++) {
  242. multipliers.push(fields[i].direction === 'desc' ? -1 : 1);
  243. }
  244. // build function
  245. fields_count = fields.length;
  246. if (!fields_count) {
  247. return null;
  248. } else if (fields_count === 1) {
  249. field = fields[0].field;
  250. multiplier = multipliers[0];
  251. return function(a, b) {
  252. return multiplier * cmp(
  253. get_field(field, a),
  254. get_field(field, b)
  255. );
  256. };
  257. } else {
  258. return function(a, b) {
  259. var i, result, a_value, b_value, field;
  260. for (i = 0; i < fields_count; i++) {
  261. field = fields[i].field;
  262. result = multipliers[i] * cmp(
  263. get_field(field, a),
  264. get_field(field, b)
  265. );
  266. if (result) return result;
  267. }
  268. return 0;
  269. };
  270. }
  271. };
  272. /**
  273. * Parses a search query and returns an object
  274. * with tokens and fields ready to be populated
  275. * with results.
  276. *
  277. * @param {string} query
  278. * @param {object} options
  279. * @returns {object}
  280. */
  281. Sifter.prototype.prepareSearch = function(query, options) {
  282. if (typeof query === 'object') return query;
  283. options = extend({}, options);
  284. var option_fields = options.fields;
  285. var option_sort = options.sort;
  286. var option_sort_empty = options.sort_empty;
  287. if (option_fields && !is_array(option_fields)) options.fields = [option_fields];
  288. if (option_sort && !is_array(option_sort)) options.sort = [option_sort];
  289. if (option_sort_empty && !is_array(option_sort_empty)) options.sort_empty = [option_sort_empty];
  290. return {
  291. options : options,
  292. query : String(query || '').toLowerCase(),
  293. tokens : this.tokenize(query),
  294. total : 0,
  295. items : []
  296. };
  297. };
  298. /**
  299. * Searches through all items and returns a sorted array of matches.
  300. *
  301. * The `options` parameter can contain:
  302. *
  303. * - fields {string|array}
  304. * - sort {array}
  305. * - score {function}
  306. * - filter {bool}
  307. * - limit {integer}
  308. *
  309. * Returns an object containing:
  310. *
  311. * - options {object}
  312. * - query {string}
  313. * - tokens {array}
  314. * - total {int}
  315. * - items {array}
  316. *
  317. * @param {string} query
  318. * @param {object} options
  319. * @returns {object}
  320. */
  321. Sifter.prototype.search = function(query, options) {
  322. var self = this, value, score, search, calculateScore;
  323. var fn_sort;
  324. var fn_score;
  325. search = this.prepareSearch(query, options);
  326. options = search.options;
  327. query = search.query;
  328. // generate result scoring function
  329. fn_score = options.score || self.getScoreFunction(search);
  330. // perform search and sort
  331. if (query.length) {
  332. self.iterator(self.items, function(item, id) {
  333. score = fn_score(item);
  334. if (options.filter === false || score > 0) {
  335. search.items.push({'score': score, 'id': id});
  336. }
  337. });
  338. } else {
  339. self.iterator(self.items, function(item, id) {
  340. search.items.push({'score': 1, 'id': id});
  341. });
  342. }
  343. fn_sort = self.getSortFunction(search, options);
  344. if (fn_sort) search.items.sort(fn_sort);
  345. // apply limits
  346. search.total = search.items.length;
  347. if (typeof options.limit === 'number') {
  348. search.items = search.items.slice(0, options.limit);
  349. }
  350. return search;
  351. };
  352. // utilities
  353. // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  354. var cmp = function(a, b) {
  355. if (typeof a === 'number' && typeof b === 'number') {
  356. return a > b ? 1 : (a < b ? -1 : 0);
  357. }
  358. a = String(a || '').toLowerCase();
  359. b = String(b || '').toLowerCase();
  360. if (a > b) return 1;
  361. if (b > a) return -1;
  362. return 0;
  363. };
  364. var extend = function(a, b) {
  365. var i, n, k, object;
  366. for (i = 1, n = arguments.length; i < n; i++) {
  367. object = arguments[i];
  368. if (!object) continue;
  369. for (k in object) {
  370. if (object.hasOwnProperty(k)) {
  371. a[k] = object[k];
  372. }
  373. }
  374. }
  375. return a;
  376. };
  377. var trim = function(str) {
  378. return (str + '').replace(/^\s+|\s+$|/g, '');
  379. };
  380. var escape_regex = function(str) {
  381. return (str + '').replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1');
  382. };
  383. var is_array = Array.isArray || ($ && $.isArray) || function(object) {
  384. return Object.prototype.toString.call(object) === '[object Array]';
  385. };
  386. var DIACRITICS = {
  387. 'a': '[aÀÁÂÃÄÅàáâãäåĀā]',
  388. 'c': '[cÇçćĆčČ]',
  389. 'd': '[dđĐďĎ]',
  390. 'e': '[eÈÉÊËèéêëěĚĒē]',
  391. 'i': '[iÌÍÎÏìíîïĪī]',
  392. 'n': '[nÑñňŇ]',
  393. 'o': '[oÒÓÔÕÕÖØòóôõöøŌō]',
  394. 'r': '[rřŘ]',
  395. 's': '[sŠš]',
  396. 't': '[tťŤ]',
  397. 'u': '[uÙÚÛÜùúûüůŮŪū]',
  398. 'y': '[yŸÿýÝ]',
  399. 'z': '[zŽž]'
  400. };
  401. // export
  402. // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  403. return Sifter;
  404. }));
  405. /**
  406. * microplugin.js
  407. * Copyright (c) 2013 Brian Reavis & contributors
  408. *
  409. * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
  410. * file except in compliance with the License. You may obtain a copy of the License at:
  411. * http://www.apache.org/licenses/LICENSE-2.0
  412. *
  413. * Unless required by applicable law or agreed to in writing, software distributed under
  414. * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
  415. * ANY KIND, either express or implied. See the License for the specific language
  416. * governing permissions and limitations under the License.
  417. *
  418. * @author Brian Reavis <[email protected]>
  419. */
  420. (function(root, factory) {
  421. if (typeof define === 'function' && define.amd) {
  422. define('microplugin', factory);
  423. } else if (typeof exports === 'object') {
  424. module.exports = factory();
  425. } else {
  426. root.MicroPlugin = factory();
  427. }
  428. }(this, function() {
  429. var MicroPlugin = {};
  430. MicroPlugin.mixin = function(Interface) {
  431. Interface.plugins = {};
  432. /**
  433. * Initializes the listed plugins (with options).
  434. * Acceptable formats:
  435. *
  436. * List (without options):
  437. * ['a', 'b', 'c']
  438. *
  439. * List (with options):
  440. * [{'name': 'a', options: {}}, {'name': 'b', options: {}}]
  441. *
  442. * Hash (with options):
  443. * {'a': { ... }, 'b': { ... }, 'c': { ... }}
  444. *
  445. * @param {mixed} plugins
  446. */
  447. Interface.prototype.initializePlugins = function(plugins) {
  448. var i, n, key;
  449. var self = this;
  450. var queue = [];
  451. self.plugins = {
  452. names : [],
  453. settings : {},
  454. requested : {},
  455. loaded : {}
  456. };
  457. if (utils.isArray(plugins)) {
  458. for (i = 0, n = plugins.length; i < n; i++) {
  459. if (typeof plugins[i] === 'string') {
  460. queue.push(plugins[i]);
  461. } else {
  462. self.plugins.settings[plugins[i].name] = plugins[i].options;
  463. queue.push(plugins[i].name);
  464. }
  465. }
  466. } else if (plugins) {
  467. for (key in plugins) {
  468. if (plugins.hasOwnProperty(key)) {
  469. self.plugins.settings[key] = plugins[key];
  470. queue.push(key);
  471. }
  472. }
  473. }
  474. while (queue.length) {
  475. self.require(queue.shift());
  476. }
  477. };
  478. Interface.prototype.loadPlugin = function(name) {
  479. var self = this;
  480. var plugins = self.plugins;
  481. var plugin = Interface.plugins[name];
  482. if (!Interface.plugins.hasOwnProperty(name)) {
  483. throw new Error('Unable to find "' + name + '" plugin');
  484. }
  485. plugins.requested[name] = true;
  486. plugins.loaded[name] = plugin.fn.apply(self, [self.plugins.settings[name] || {}]);
  487. plugins.names.push(name);
  488. };
  489. /**
  490. * Initializes a plugin.
  491. *
  492. * @param {string} name
  493. */
  494. Interface.prototype.require = function(name) {
  495. var self = this;
  496. var plugins = self.plugins;
  497. if (!self.plugins.loaded.hasOwnProperty(name)) {
  498. if (plugins.requested[name]) {
  499. throw new Error('Plugin has circular dependency ("' + name + '")');
  500. }
  501. self.loadPlugin(name);
  502. }
  503. return plugins.loaded[name];
  504. };
  505. /**
  506. * Registers a plugin.
  507. *
  508. * @param {string} name
  509. * @param {function} fn
  510. */
  511. Interface.define = function(name, fn) {
  512. Interface.plugins[name] = {
  513. 'name' : name,
  514. 'fn' : fn
  515. };
  516. };
  517. };
  518. var utils = {
  519. isArray: Array.isArray || function(vArg) {
  520. return Object.prototype.toString.call(vArg) === '[object Array]';
  521. }
  522. };
  523. return MicroPlugin;
  524. }));
  525. /**
  526. * selectize.js (v0.11.0)
  527. * Copyright (c) 2013 Brian Reavis & contributors
  528. *
  529. * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
  530. * file except in compliance with the License. You may obtain a copy of the License at:
  531. * http://www.apache.org/licenses/LICENSE-2.0
  532. *
  533. * Unless required by applicable law or agreed to in writing, software distributed under
  534. * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
  535. * ANY KIND, either express or implied. See the License for the specific language
  536. * governing permissions and limitations under the License.
  537. *
  538. * @author Brian Reavis <[email protected]>
  539. */
  540. /*jshint curly:false */
  541. /*jshint browser:true */
  542. (function(root, factory) {
  543. if (typeof define === 'function' && define.amd) {
  544. define('selectize', ['jquery','sifter','microplugin'], factory);
  545. } else if (typeof exports === 'object') {
  546. module.exports = factory(require('jquery'), require('sifter'), require('microplugin'));
  547. } else {
  548. root.Selectize = factory(root.jQuery, root.Sifter, root.MicroPlugin);
  549. }
  550. }(this, function($, Sifter, MicroPlugin) {
  551. 'use strict';
  552. var highlight = function($element, pattern) {
  553. if (typeof pattern === 'string' && !pattern.length) return;
  554. var regex = (typeof pattern === 'string') ? new RegExp(pattern, 'i') : pattern;
  555. var highlight = function(node) {
  556. var skip = 0;
  557. if (node.nodeType === 3) {
  558. var pos = node.data.search(regex);
  559. if (pos >= 0 && node.data.length > 0) {
  560. var match = node.data.match(regex);
  561. var spannode = document.createElement('span');
  562. spannode.className = 'highlight';
  563. var middlebit = node.splitText(pos);
  564. var endbit = middlebit.splitText(match[0].length);
  565. var middleclone = middlebit.cloneNode(true);
  566. spannode.appendChild(middleclone);
  567. middlebit.parentNode.replaceChild(spannode, middlebit);
  568. skip = 1;
  569. }
  570. } else if (node.nodeType === 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
  571. for (var i = 0; i < node.childNodes.length; ++i) {
  572. i += highlight(node.childNodes[i]);
  573. }
  574. }
  575. return skip;
  576. };
  577. return $element.each(function() {
  578. highlight(this);
  579. });
  580. };
  581. var MicroEvent = function() {};
  582. MicroEvent.prototype = {
  583. on: function(event, fct){
  584. this._events = this._events || {};
  585. this._events[event] = this._events[event] || [];
  586. this._events[event].push(fct);
  587. },
  588. off: function(event, fct){
  589. var n = arguments.length;
  590. if (n === 0) return delete this._events;
  591. if (n === 1) return delete this._events[event];
  592. this._events = this._events || {};
  593. if (event in this._events === false) return;
  594. this._events[event].splice(this._events[event].indexOf(fct), 1);
  595. },
  596. trigger: function(event /* , args... */){
  597. this._events = this._events || {};
  598. if (event in this._events === false) return;
  599. for (var i = 0; i < this._events[event].length; i++){
  600. this._events[event][i].apply(this, Array.prototype.slice.call(arguments, 1));
  601. }
  602. }
  603. };
  604. /**
  605. * Mixin will delegate all MicroEvent.js function in the destination object.
  606. *
  607. * - MicroEvent.mixin(Foobar) will make Foobar able to use MicroEvent
  608. *
  609. * @param {object} the object which will support MicroEvent
  610. */
  611. MicroEvent.mixin = function(destObject){
  612. var props = ['on', 'off', 'trigger'];
  613. for (var i = 0; i < props.length; i++){
  614. destObject.prototype[props[i]] = MicroEvent.prototype[props[i]];
  615. }
  616. };
  617. var IS_MAC = /Mac/.test(navigator.userAgent);
  618. var KEY_A = 65;
  619. var KEY_COMMA = 188;
  620. var KEY_RETURN = 13;
  621. var KEY_ESC = 27;
  622. var KEY_LEFT = 37;
  623. var KEY_UP = 38;
  624. var KEY_P = 80;
  625. var KEY_RIGHT = 39;
  626. var KEY_DOWN = 40;
  627. var KEY_N = 78;
  628. var KEY_BACKSPACE = 8;
  629. var KEY_DELETE = 46;
  630. var KEY_SHIFT = 16;
  631. var KEY_CMD = IS_MAC ? 91 : 17;
  632. var KEY_CTRL = IS_MAC ? 18 : 17;
  633. var KEY_TAB = 9;
  634. var TAG_SELECT = 1;
  635. var TAG_INPUT = 2;
  636. var isset = function(object) {
  637. return typeof object !== 'undefined';
  638. };
  639. /**
  640. * Converts a scalar to its best string representation
  641. * for hash keys and HTML attribute values.
  642. *
  643. * Transformations:
  644. * 'str' -> 'str'
  645. * null -> ''
  646. * undefined -> ''
  647. * true -> '1'
  648. * false -> '0'
  649. * 0 -> '0'
  650. * 1 -> '1'
  651. *
  652. * @param {string} value
  653. * @returns {string|null}
  654. */
  655. var hash_key = function(value) {
  656. if (typeof value === 'undefined' || value === null) return null;
  657. if (typeof value === 'boolean') return value ? '1' : '0';
  658. return value + '';
  659. };
  660. /**
  661. * Escapes a string for use within HTML.
  662. *
  663. * @param {string} str
  664. * @returns {string}
  665. */
  666. var escape_html = function(str) {
  667. return (str + '')
  668. .replace(/&/g, '&amp;')
  669. .replace(/</g, '&lt;')
  670. .replace(/>/g, '&gt;')
  671. .replace(/"/g, '&quot;');
  672. };
  673. /**
  674. * Escapes "$" characters in replacement strings.
  675. *
  676. * @param {string} str
  677. * @returns {string}
  678. */
  679. var escape_replace = function(str) {
  680. return (str + '').replace(/\$/g, '$$$$');
  681. };
  682. var hook = {};
  683. /**
  684. * Wraps `method` on `self` so that `fn`
  685. * is invoked before the original method.
  686. *
  687. * @param {object} self
  688. * @param {string} method
  689. * @param {function} fn
  690. */
  691. hook.before = function(self, method, fn) {
  692. var original = self[method];
  693. self[method] = function() {
  694. fn.apply(self, arguments);
  695. return original.apply(self, arguments);
  696. };
  697. };
  698. /**
  699. * Wraps `method` on `self` so that `fn`
  700. * is invoked after the original method.
  701. *
  702. * @param {object} self
  703. * @param {string} method
  704. * @param {function} fn
  705. */
  706. hook.after = function(self, method, fn) {
  707. var original = self[method];
  708. self[method] = function() {
  709. var result = original.apply(self, arguments);
  710. fn.apply(self, arguments);
  711. return result;
  712. };
  713. };
  714. /**
  715. * Builds a hash table out of an array of
  716. * objects, using the specified `key` within
  717. * each object.
  718. *
  719. * @param {string} key
  720. * @param {mixed} objects
  721. */
  722. var build_hash_table = function(key, objects) {
  723. if (!$.isArray(objects)) return objects;
  724. var i, n, table = {};
  725. for (i = 0, n = objects.length; i < n; i++) {
  726. if (objects[i].hasOwnProperty(key)) {
  727. table[objects[i][key]] = objects[i];
  728. }
  729. }
  730. return table;
  731. };
  732. /**
  733. * Wraps `fn` so that it can only be invoked once.
  734. *
  735. * @param {function} fn
  736. * @returns {function}
  737. */
  738. var once = function(fn) {
  739. var called = false;
  740. return function() {
  741. if (called) return;
  742. called = true;
  743. fn.apply(this, arguments);
  744. };
  745. };
  746. /**
  747. * Wraps `fn` so that it can only be called once
  748. * every `delay` milliseconds (invoked on the falling edge).
  749. *
  750. * @param {function} fn
  751. * @param {int} delay
  752. * @returns {function}
  753. */
  754. var debounce = function(fn, delay) {
  755. var timeout;
  756. return function() {
  757. var self = this;
  758. var args = arguments;
  759. window.clearTimeout(timeout);
  760. timeout = window.setTimeout(function() {
  761. fn.apply(self, args);
  762. }, delay);
  763. };
  764. };
  765. /**
  766. * Debounce all fired events types listed in `types`
  767. * while executing the provided `fn`.
  768. *
  769. * @param {object} self
  770. * @param {array} types
  771. * @param {function} fn
  772. */
  773. var debounce_events = function(self, types, fn) {
  774. var type;
  775. var trigger = self.trigger;
  776. var event_args = {};
  777. // override trigger method
  778. self.trigger = function() {
  779. var type = arguments[0];
  780. if (types.indexOf(type) !== -1) {
  781. event_args[type] = arguments;
  782. } else {
  783. return trigger.apply(self, arguments);
  784. }
  785. };
  786. // invoke provided function
  787. fn.apply(self, []);
  788. self.trigger = trigger;
  789. // trigger queued events
  790. for (type in event_args) {
  791. if (event_args.hasOwnProperty(type)) {
  792. trigger.apply(self, event_args[type]);
  793. }
  794. }
  795. };
  796. /**
  797. * A workaround for http://bugs.jquery.com/ticket/6696
  798. *
  799. * @param {object} $parent - Parent element to listen on.
  800. * @param {string} event - Event name.
  801. * @param {string} selector - Descendant selector to filter by.
  802. * @param {function} fn - Event handler.
  803. */
  804. var watchChildEvent = function($parent, event, selector, fn) {
  805. $parent.on(event, selector, function(e) {
  806. var child = e.target;
  807. while (child && child.parentNode !== $parent[0]) {
  808. child = child.parentNode;
  809. }
  810. e.currentTarget = child;
  811. return fn.apply(this, [e]);
  812. });
  813. };
  814. /**
  815. * Determines the current selection within a text input control.
  816. * Returns an object containing:
  817. * - start
  818. * - length
  819. *
  820. * @param {object} input
  821. * @returns {object}
  822. */
  823. var getSelection = function(input) {
  824. var result = {};
  825. if ('selectionStart' in input) {
  826. result.start = input.selectionStart;
  827. result.length = input.selectionEnd - result.start;
  828. } else if (document.selection) {
  829. input.focus();
  830. var sel = document.selection.createRange();
  831. var selLen = document.selection.createRange().text.length;
  832. sel.moveStart('character', -input.value.length);
  833. result.start = sel.text.length - selLen;
  834. result.length = selLen;
  835. }
  836. return result;
  837. };
  838. /**
  839. * Copies CSS properties from one element to another.
  840. *
  841. * @param {object} $from
  842. * @param {object} $to
  843. * @param {array} properties
  844. */
  845. var transferStyles = function($from, $to, properties) {
  846. var i, n, styles = {};
  847. if (properties) {
  848. for (i = 0, n = properties.length; i < n; i++) {
  849. styles[properties[i]] = $from.css(properties[i]);
  850. }
  851. } else {
  852. styles = $from.css();
  853. }
  854. $to.css(styles);
  855. };
  856. /**
  857. * Measures the width of a string within a
  858. * parent element (in pixels).
  859. *
  860. * @param {string} str
  861. * @param {object} $parent
  862. * @returns {int}
  863. */
  864. var measureString = function(str, $parent) {
  865. if (!str) {
  866. return 0;
  867. }
  868. var $test = $('<test>').css({
  869. position: 'absolute',
  870. top: -99999,
  871. left: -99999,
  872. width: 'auto',
  873. padding: 0,
  874. whiteSpace: 'pre'
  875. }).text(str).appendTo('body');
  876. transferStyles($parent, $test, [
  877. 'letterSpacing',
  878. 'fontSize',
  879. 'fontFamily',
  880. 'fontWeight',
  881. 'textTransform'
  882. ]);
  883. var width = $test.width();
  884. $test.remove();
  885. return width;
  886. };
  887. /**
  888. * Sets up an input to grow horizontally as the user
  889. * types. If the value is changed manually, you can
  890. * trigger the "update" handler to resize:
  891. *
  892. * $input.trigger('update');
  893. *
  894. * @param {object} $input
  895. */
  896. var autoGrow = function($input) {
  897. var currentWidth = null;
  898. var update = function(e, options) {
  899. var value, keyCode, printable, placeholder, width;
  900. var shift, character, selection;
  901. e = e || window.event || {};
  902. options = options || {};
  903. if (e.metaKey || e.altKey) return;
  904. if (!options.force && $input.data('grow') === false) return;
  905. value = $input.val();
  906. if (e.type && e.type.toLowerCase() === 'keydown') {
  907. keyCode = e.keyCode;
  908. printable = (
  909. (keyCode >= 97 && keyCode <= 122) || // a-z
  910. (keyCode >= 65 && keyCode <= 90) || // A-Z
  911. (keyCode >= 48 && keyCode <= 57) || // 0-9
  912. keyCode === 32 // space
  913. );
  914. if (keyCode === KEY_DELETE || keyCode === KEY_BACKSPACE) {
  915. selection = getSelection($input[0]);
  916. if (selection.length) {
  917. value = value.substring(0, selection.start) + value.substring(selection.start + selection.length);
  918. } else if (keyCode === KEY_BACKSPACE && selection.start) {
  919. value = value.substring(0, selection.start - 1) + value.substring(selection.start + 1);
  920. } else if (keyCode === KEY_DELETE && typeof selection.start !== 'undefined') {
  921. value = value.substring(0, selection.start) + value.substring(selection.start + 1);
  922. }
  923. } else if (printable) {
  924. shift = e.shiftKey;
  925. character = String.fromCharCode(e.keyCode);
  926. if (shift) character = character.toUpperCase();
  927. else character = character.toLowerCase();
  928. value += character;
  929. }
  930. }
  931. placeholder = $input.attr('placeholder');
  932. if (!value && placeholder) {
  933. value = placeholder;
  934. }
  935. width = measureString(value, $input) + 4;
  936. if (width !== currentWidth) {
  937. currentWidth = width;
  938. $input.width(width);
  939. $input.triggerHandler('resize');
  940. }
  941. };
  942. $input.on('keydown keyup update blur', update);
  943. update();
  944. };
  945. var Selectize = function($input, settings) {
  946. var key, i, n, dir, input, self = this;
  947. input = $input[0];
  948. input.selectize = self;
  949. // detect rtl environment
  950. dir = window.getComputedStyle ? window.getComputedStyle(input, null).getPropertyValue('direction') : input.currentStyle && input.currentStyle.direction;
  951. dir = dir || $input.parents('[dir]:first').attr('dir') || '';
  952. // setup default state
  953. $.extend(self, {
  954. settings : settings,
  955. $input : $input,
  956. tagType : input.tagName.toLowerCase() === 'select' ? TAG_SELECT : TAG_INPUT,
  957. rtl : /rtl/i.test(dir),
  958. eventNS : '.selectize' + (++Selectize.count),
  959. highlightedValue : null,
  960. isOpen : false,
  961. isDisabled : false,
  962. isRequired : $input.is('[required]'),
  963. isInvalid : false,
  964. isLocked : false,
  965. isFocused : false,
  966. isInputHidden : false,
  967. isSetup : false,
  968. isShiftDown : false,
  969. isCmdDown : false,
  970. isCtrlDown : false,
  971. ignoreFocus : false,
  972. ignoreBlur : false,
  973. ignoreHover : false,
  974. hasOptions : false,
  975. currentResults : null,
  976. lastValue : '',
  977. caretPos : 0,
  978. loading : 0,
  979. loadedSearches : {},
  980. $activeOption : null,
  981. $activeItems : [],
  982. optgroups : {},
  983. options : {},
  984. userOptions : {},
  985. items : [],
  986. renderCache : {},
  987. onSearchChange : settings.loadThrottle === null ? self.onSearchChange : debounce(self.onSearchChange, settings.loadThrottle)
  988. });
  989. // search system
  990. self.sifter = new Sifter(this.options, {diacritics: settings.diacritics});
  991. // build options table
  992. $.extend(self.options, build_hash_table(settings.valueField, settings.options));
  993. delete self.settings.options;
  994. // build optgroup table
  995. $.extend(self.optgroups, build_hash_table(settings.optgroupValueField, settings.optgroups));
  996. delete self.settings.optgroups;
  997. // option-dependent defaults
  998. self.settings.mode = self.settings.mode || (self.settings.maxItems === 1 ? 'single' : 'multi');
  999. if (typeof self.settings.hideSelected !== 'boolean') {
  1000. self.settings.hideSelected = self.settings.mode === 'multi';
  1001. }
  1002. if (self.settings.create) {
  1003. self.canCreate = function(input) {
  1004. var filter = self.settings.createFilter;
  1005. return input.length
  1006. && (typeof filter !== 'function' || filter.apply(self, [input]))
  1007. && (typeof filter !== 'string' || new RegExp(filter).test(input))
  1008. && (!(filter instanceof RegExp) || filter.test(input));
  1009. };
  1010. }
  1011. self.initializePlugins(self.settings.plugins);
  1012. self.setupCallbacks();
  1013. self.setupTemplates();
  1014. self.setup();
  1015. };
  1016. // mixins
  1017. // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  1018. MicroEvent.mixin(Selectize);
  1019. MicroPlugin.mixin(Selectize);
  1020. // methods
  1021. // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  1022. $.extend(Selectize.prototype, {
  1023. /**
  1024. * Creates all elements and sets up event bindings.
  1025. */
  1026. setup: function() {
  1027. var self = this;
  1028. var settings = self.settings;
  1029. var eventNS = self.eventNS;
  1030. var $window = $(window);
  1031. var $document = $(document);
  1032. var $input = self.$input;
  1033. var $wrapper;
  1034. var $control;
  1035. var $control_input;
  1036. var $dropdown;
  1037. var $dropdown_content;
  1038. var $dropdown_parent;
  1039. var inputMode;
  1040. var timeout_blur;
  1041. var timeout_focus;
  1042. var tab_index;
  1043. var classes;
  1044. var classes_plugins;
  1045. inputMode = self.settings.mode;
  1046. tab_index = $input.attr('tabindex') || '';
  1047. classes = $input.attr('class') || '';
  1048. $wrapper = $('<div>').addClass(settings.wrapperClass).addClass(classes).addClass(inputMode);
  1049. $control = $('<div>').addClass(settings.inputClass).addClass('items').appendTo($wrapper);
  1050. $control_input = $('<input type="text" autocomplete="off" />').appendTo($control).attr('tabindex', tab_index);
  1051. $dropdown_parent = $(settings.dropdownParent || $wrapper);
  1052. $dropdown = $('<div>').addClass(settings.dropdownClass).addClass(classes).addClass(inputMode).hide().appendTo($dropdown_parent);
  1053. $dropdown_content = $('<div>').addClass(settings.dropdownContentClass).appendTo($dropdown);
  1054. $wrapper.css({
  1055. width: $input[0].style.width
  1056. });
  1057. if (self.plugins.names.length) {
  1058. classes_plugins = 'plugin-' + self.plugins.names.join(' plugin-');
  1059. $wrapper.addClass(classes_plugins);
  1060. $dropdown.addClass(classes_plugins);
  1061. }
  1062. if ((settings.maxItems === null || settings.maxItems > 1) && self.tagType === TAG_SELECT) {
  1063. $input.attr('multiple', 'multiple');
  1064. }
  1065. if (self.settings.placeholder) {
  1066. $control_input.attr('placeholder', settings.placeholder);
  1067. }
  1068. if ($input.attr('autocorrect')) {
  1069. $control_input.attr('autocorrect', $input.attr('autocorrect'));
  1070. }
  1071. if ($input.attr('autocapitalize')) {
  1072. $control_input.attr('autocapitalize', $input.attr('autocapitalize'));
  1073. }
  1074. self.$wrapper = $wrapper;
  1075. self.$control = $control;
  1076. self.$control_input = $control_input;
  1077. self.$dropdown = $dropdown;
  1078. self.$dropdown_content = $dropdown_content;
  1079. $dropdown.on('mouseenter', '[data-selectable]', function() { return self.onOptionHover.apply(self, arguments); });
  1080. $dropdown.on('mousedown', '[data-selectable]', function() { return self.onOptionSelect.apply(self, arguments); });
  1081. watchChildEvent($control, 'mousedown', '*:not(input)', function() { return self.onItemSelect.apply(self, arguments); });
  1082. autoGrow($control_input);
  1083. $control.on({
  1084. mousedown : function() { return self.onMouseDown.apply(self, arguments); },
  1085. click : function() { return self.onClick.apply(self, arguments); }
  1086. });
  1087. $control_input.on({
  1088. mousedown : function(e) { e.stopPropagation(); },
  1089. keydown : function() { return self.onKeyDown.apply(self, arguments); },
  1090. keyup : function() { return self.onKeyUp.apply(self, arguments); },
  1091. keypress : function() { return self.onKeyPress.apply(self, arguments); },
  1092. resize : function() { self.positionDropdown.apply(self, []); },
  1093. blur : function() { return self.onBlur.apply(self, arguments); },
  1094. focus : function() { self.ignoreBlur = false; return self.onFocus.apply(self, arguments); },
  1095. paste : function() { return self.onPaste.apply(self, arguments); }
  1096. });
  1097. $document.on('keydown' + eventNS, function(e) {
  1098. self.isCmdDown = e[IS_MAC ? 'metaKey' : 'ctrlKey'];
  1099. self.isCtrlDown = e[IS_MAC ? 'altKey' : 'ctrlKey'];
  1100. self.isShiftDown = e.shiftKey;
  1101. });
  1102. $document.on('keyup' + eventNS, function(e) {
  1103. if (e.keyCode === KEY_CTRL) self.isCtrlDown = false;
  1104. if (e.keyCode === KEY_SHIFT) self.isShiftDown = false;
  1105. if (e.keyCode === KEY_CMD) self.isCmdDown = false;
  1106. });
  1107. $document.on('mousedown' + eventNS, function(e) {
  1108. if (self.isFocused) {
  1109. // prevent events on the dropdown scrollbar from causing the control to blur
  1110. if (e.target === self.$dropdown[0] || e.target.parentNode === self.$dropdown[0]) {
  1111. return false;
  1112. }
  1113. // blur on click outside
  1114. if (!self.$control.has(e.target).length && e.target !== self.$control[0]) {
  1115. self.blur();
  1116. }
  1117. }
  1118. });
  1119. $window.on(['scroll' + eventNS, 'resize' + eventNS].join(' '), function() {
  1120. if (self.isOpen) {
  1121. self.positionDropdown.apply(self, arguments);
  1122. }
  1123. });
  1124. $window.on('mousemove' + eventNS, function() {
  1125. self.ignoreHover = false;
  1126. });
  1127. // store original children and tab index so that they can be
  1128. // restored when the destroy() method is called.
  1129. this.revertSettings = {
  1130. $children : $input.children().detach(),
  1131. tabindex : $input.attr('tabindex')
  1132. };
  1133. $input.attr('tabindex', -1).hide().after(self.$wrapper);
  1134. if ($.isArray(settings.items)) {
  1135. self.setValue(settings.items);
  1136. delete settings.items;
  1137. }
  1138. // feature detect for the validation API
  1139. if ($input[0].validity) {
  1140. $input.on('invalid' + eventNS, function(e) {
  1141. e.preventDefault();
  1142. self.isInvalid = true;
  1143. self.refreshState();
  1144. });
  1145. }
  1146. self.updateOriginalInput();
  1147. self.refreshItems();
  1148. self.refreshState();
  1149. self.updatePlaceholder();
  1150. self.isSetup = true;
  1151. if ($input.is(':disabled')) {
  1152. self.disable();
  1153. }
  1154. self.on('change', this.onChange);
  1155. $input.data('selectize', self);
  1156. $input.addClass('selectized');
  1157. self.trigger('initialize');
  1158. // preload options
  1159. if (settings.preload === true) {
  1160. self.onSearchChange('');
  1161. }
  1162. },
  1163. /**
  1164. * Sets up default rendering functions.
  1165. */
  1166. setupTemplates: function() {
  1167. var self = this;
  1168. var field_label = self.settings.labelField;
  1169. var field_optgroup = self.settings.optgroupLabelField;
  1170. var templates = {
  1171. 'optgroup': function(data) {
  1172. return '<div class="optgroup">' + data.html + '</div>';
  1173. },
  1174. 'optgroup_header': function(data, escape) {
  1175. return '<div class="optgroup-header">' + escape(data[field_optgroup]) + '</div>';
  1176. },
  1177. 'option': function(data, escape) {
  1178. return '<div class="option">' + escape(data[field_label]) + '</div>';
  1179. },
  1180. 'item': function(data, escape) {
  1181. return '<div class="item">' + escape(data[field_label]) + '</div>';
  1182. },
  1183. 'option_create': function(data, escape) {
  1184. return '<div class="create">Add <strong>' + escape(data.input) + '</strong>&hellip;</div>';
  1185. }
  1186. };
  1187. self.settings.render = $.extend({}, templates, self.settings.render);
  1188. },
  1189. /**
  1190. * Maps fired events to callbacks provided
  1191. * in the settings used when creating the control.
  1192. */
  1193. setupCallbacks: function() {
  1194. var key, fn, callbacks = {
  1195. 'initialize' : 'onInitialize',
  1196. 'change' : 'onChange',
  1197. 'item_add' : 'onItemAdd',
  1198. 'item_remove' : 'onItemRemove',
  1199. 'clear' : 'onClear',
  1200. 'option_add' : 'onOptionAdd',
  1201. 'option_remove' : 'onOptionRemove',
  1202. 'option_clear' : 'onOptionClear',
  1203. 'dropdown_open' : 'onDropdownOpen',
  1204. 'dropdown_close' : 'onDropdownClose',
  1205. 'type' : 'onType'
  1206. };
  1207. for (key in callbacks) {
  1208. if (callbacks.hasOwnProperty(key)) {
  1209. fn = this.settings[callbacks[key]];
  1210. if (fn) this.on(key, fn);
  1211. }
  1212. }
  1213. },
  1214. /**
  1215. * Triggered when the main control element
  1216. * has a click event.
  1217. *
  1218. * @param {object} e
  1219. * @return {boolean}
  1220. */
  1221. onClick: function(e) {
  1222. var self = this;
  1223. // necessary for mobile webkit devices (manual focus triggering
  1224. // is ignored unless invoked within a click event)
  1225. if (!self.isFocused) {
  1226. self.focus();
  1227. e.preventDefault();
  1228. }
  1229. },
  1230. /**
  1231. * Triggered when the main control element
  1232. * has a mouse down event.
  1233. *
  1234. * @param {object} e
  1235. * @return {boolean}
  1236. */
  1237. onMouseDown: function(e) {
  1238. var self = this;
  1239. var defaultPrevented = e.isDefaultPrevented();
  1240. var $target = $(e.target);
  1241. if (self.isFocused) {
  1242. // retain focus by preventing native handling. if the
  1243. // event target is the input it should not be modified.
  1244. // otherwise, text selection within the input won't work.
  1245. if (e.target !== self.$control_input[0]) {
  1246. if (self.settings.mode === 'single') {
  1247. // toggle dropdown
  1248. self.isOpen ? self.close() : self.open();
  1249. } else if (!defaultPrevented) {
  1250. self.setActiveItem(null);
  1251. }
  1252. return false;
  1253. }
  1254. } else {
  1255. // give control focus
  1256. if (!defaultPrevented) {
  1257. window.setTimeout(function() {
  1258. self.focus();
  1259. }, 0);
  1260. }
  1261. }
  1262. },
  1263. /**
  1264. * Triggered when the value of the control has been changed.
  1265. * This should propagate the event to the original DOM
  1266. * input / select element.
  1267. */
  1268. onChange: function() {
  1269. this.$input.trigger('change');
  1270. },
  1271. /**
  1272. * Triggered on <input> paste.
  1273. *
  1274. * @param {object} e
  1275. * @returns {boolean}
  1276. */
  1277. onPaste: function(e) {
  1278. var self = this;
  1279. if (self.isFull() || self.isInputHidden || self.isLocked) {
  1280. e.preventDefault();
  1281. }
  1282. },
  1283. /**
  1284. * Triggered on <input> keypress.
  1285. *
  1286. * @param {object} e
  1287. * @returns {boolean}
  1288. */
  1289. onKeyPress: function(e) {
  1290. if (this.isLocked) return e && e.preventDefault();
  1291. var character = String.fromCharCode(e.keyCode || e.which);
  1292. if (this.settings.create && character === this.settings.delimiter) {
  1293. this.createItem();
  1294. e.preventDefault();
  1295. return false;
  1296. }
  1297. },
  1298. /**
  1299. * Triggered on <input> keydown.
  1300. *
  1301. * @param {object} e
  1302. * @returns {boolean}
  1303. */
  1304. onKeyDown: function(e) {
  1305. var isInput = e.target === this.$control_input[0];
  1306. var self = this;
  1307. if (self.isLocked) {
  1308. if (e.keyCode !== KEY_TAB) {
  1309. e.preventDefault();
  1310. }
  1311. return;
  1312. }
  1313. switch (e.keyCode) {
  1314. case KEY_A:
  1315. if (self.isCmdDown) {
  1316. self.selectAll();
  1317. return;
  1318. }
  1319. break;
  1320. case KEY_ESC:
  1321. self.close();
  1322. return;
  1323. case KEY_N:
  1324. if (!e.ctrlKey || e.altKey) break;
  1325. case KEY_DOWN:
  1326. if (!self.isOpen && self.hasOptions) {
  1327. self.open();
  1328. } else if (self.$activeOption) {
  1329. self.ignoreHover = true;
  1330. var $next = self.getAdjacentOption(self.$activeOption, 1);
  1331. if ($next.length) self.setActiveOption($next, true, true);
  1332. }
  1333. e.preventDefault();
  1334. return;
  1335. case KEY_P:
  1336. if (!e.ctrlKey || e.altKey) break;
  1337. case KEY_UP:
  1338. if (self.$activeOption) {
  1339. self.ignoreHover = true;
  1340. var $prev = self.getAdjacentOption(self.$activeOption, -1);
  1341. if ($prev.length) self.setActiveOption($prev, true, true);
  1342. }
  1343. e.preventDefault();
  1344. return;
  1345. case KEY_RETURN:
  1346. if (self.isOpen && self.$activeOption) {
  1347. self.onOptionSelect({currentTarget: self.$activeOption});
  1348. }
  1349. e.preventDefault();
  1350. return;
  1351. case KEY_LEFT:
  1352. self.advanceSelection(-1, e);
  1353. return;
  1354. case KEY_RIGHT:
  1355. self.advanceSelection(1, e);
  1356. return;
  1357. case KEY_TAB:
  1358. if (self.settings.selectOnTab && self.isOpen && self.$activeOption) {
  1359. self.onOptionSelect({currentTarget: self.$activeOption});
  1360. e.preventDefault();
  1361. }
  1362. if (self.settings.create && self.createItem()) {
  1363. e.preventDefault();
  1364. }
  1365. return;
  1366. case KEY_BACKSPACE:
  1367. case KEY_DELETE:
  1368. self.deleteSelection(e);
  1369. return;
  1370. }
  1371. if ((self.isFull() || self.isInputHidden) && !(IS_MAC ? e.metaKey : e.ctrlKey)) {
  1372. e.preventDefault();
  1373. return;
  1374. }
  1375. },
  1376. /**
  1377. * Triggered on <input> keyup.
  1378. *
  1379. * @param {object} e
  1380. * @returns {boolean}
  1381. */
  1382. onKeyUp: function(e) {
  1383. var self = this;
  1384. if (self.isLocked) return e && e.preventDefault();
  1385. var value = self.$control_input.val() || '';
  1386. if (self.lastValue !== value) {
  1387. self.lastValue = value;
  1388. self.onSearchChange(value);
  1389. self.refreshOptions();
  1390. self.trigger('type', value);
  1391. }
  1392. },
  1393. /**
  1394. * Invokes the user-provide option provider / loader.
  1395. *
  1396. * Note: this function is debounced in the Selectize
  1397. * constructor (by `settings.loadDelay` milliseconds)
  1398. *
  1399. * @param {string} value
  1400. */
  1401. onSearchChange: function(value) {
  1402. var self = this;
  1403. var fn = self.settings.load;
  1404. if (!fn) return;
  1405. if (self.loadedSearches.hasOwnProperty(value)) return;
  1406. self.loadedSearches[value] = true;
  1407. self.load(function(callback) {
  1408. fn.apply(self, [value, callback]);
  1409. });
  1410. },
  1411. /**
  1412. * Triggered on <input> focus.
  1413. *
  1414. * @param {object} e (optional)
  1415. * @returns {boolean}
  1416. */
  1417. onFocus: function(e) {
  1418. var self = this;
  1419. self.isFocused = true;
  1420. if (self.isDisabled) {
  1421. self.blur();
  1422. e && e.preventDefault();
  1423. return false;
  1424. }
  1425. if (self.ignoreFocus) return;
  1426. if (self.settings.preload === 'focus') self.onSearchChange('');
  1427. if (!self.$activeItems.length) {
  1428. self.showInput();
  1429. self.setActiveItem(null);
  1430. self.refreshOptions(!!self.settings.openOnFocus);
  1431. }
  1432. self.refreshState();
  1433. },
  1434. /**
  1435. * Triggered on <input> blur.
  1436. *
  1437. * @param {object} e
  1438. * @returns {boolean}
  1439. */
  1440. onBlur: function(e) {
  1441. var self = this;
  1442. self.isFocused = false;
  1443. if (self.ignoreFocus) return;
  1444. // necessary to prevent IE closing the dropdown when the scrollbar is clicked
  1445. if (!self.ignoreBlur && document.activeElement === self.$dropdown_content[0]) {
  1446. self.ignoreBlur = true;
  1447. self.onFocus(e);
  1448. return;
  1449. }
  1450. if (self.settings.create && self.settings.createOnBlur) {
  1451. self.createItem(false);
  1452. }
  1453. self.close();
  1454. self.setTextboxValue('');
  1455. self.setActiveItem(null);
  1456. self.setActiveOption(null);
  1457. self.setCaret(self.items.length);
  1458. self.refreshState();
  1459. },
  1460. /**
  1461. * Triggered when the user rolls over
  1462. * an option in the autocomplete dropdown menu.
  1463. *
  1464. * @param {object} e
  1465. * @returns {boolean}
  1466. */
  1467. onOptionHover: function(e) {
  1468. if (this.ignoreHover) return;
  1469. this.setActiveOption(e.currentTarget, false);
  1470. },
  1471. /**
  1472. * Triggered when the user clicks on an option
  1473. * in the autocomplete dropdown menu.
  1474. *
  1475. * @param {object} e
  1476. * @returns {boolean}
  1477. */
  1478. onOptionSelect: function(e) {
  1479. var value, $target, $option, self = this;
  1480. if (e.preventDefault) {
  1481. e.preventDefault();
  1482. e.stopPropagation();
  1483. }
  1484. $target = $(e.currentTarget);
  1485. if ($target.hasClass('create')) {
  1486. self.createItem();
  1487. } else {
  1488. value = $target.attr('data-value');
  1489. if (typeof value !== 'undefined') {
  1490. self.lastQuery = null;
  1491. self.setTextboxValue('');
  1492. self.addItem(value);
  1493. if (!self.settings.hideSelected && e.type && /mouse/.test(e.type)) {
  1494. self.setActiveOption(self.getOption(value));
  1495. }
  1496. }
  1497. }
  1498. },
  1499. /**
  1500. * Triggered when the user clicks on an item
  1501. * that has been selected.
  1502. *
  1503. * @param {object} e
  1504. * @returns {boolean}
  1505. */
  1506. onItemSelect: function(e) {
  1507. var self = this;
  1508. if (self.isLocked) return;
  1509. if (self.settings.mode === 'multi') {
  1510. e.preventDefault();
  1511. self.setActiveItem(e.currentTarget, e);
  1512. }
  1513. },
  1514. /**
  1515. * Invokes the provided method that provides
  1516. * results to a callback---which are then added
  1517. * as options to the control.
  1518. *
  1519. * @param {function} fn
  1520. */
  1521. load: function(fn) {
  1522. var self = this;
  1523. var $wrapper = self.$wrapper.addClass('loading');
  1524. self.loading++;
  1525. fn.apply(self, [function(results) {
  1526. self.loading = Math.max(self.loading - 1, 0);
  1527. if (results && results.length) {
  1528. self.addOption(results);
  1529. self.refreshOptions(self.isFocused && !self.isInputHidden);
  1530. }
  1531. if (!self.loading) {
  1532. $wrapper.removeClass('loading');
  1533. }
  1534. self.trigger('load', results);
  1535. }]);
  1536. },
  1537. /**
  1538. * Sets the input field of the control to the specified value.
  1539. *
  1540. * @param {string} value
  1541. */
  1542. setTextboxValue: function(value) {
  1543. var $input = this.$control_input;
  1544. var changed = $input.val() !== value;
  1545. if (changed) {
  1546. $input.val(value).triggerHandler('update');
  1547. this.lastValue = value;
  1548. }
  1549. },
  1550. /**
  1551. * Returns the value of the control. If multiple items
  1552. * can be selected (e.g. <select multiple>), this returns
  1553. * an array. If only one item can be selected, this
  1554. * returns a string.
  1555. *
  1556. * @returns {mixed}
  1557. */
  1558. getValue: function() {
  1559. if (this.tagType === TAG_SELECT && this.$input.attr('multiple')) {
  1560. return this.items;
  1561. } else {
  1562. return this.items.join(this.settings.delimiter);
  1563. }
  1564. },
  1565. /**
  1566. * Resets the selected items to the given value.
  1567. *
  1568. * @param {mixed} value
  1569. */
  1570. setValue: function(value) {
  1571. debounce_events(this, ['change'], function() {
  1572. this.clear();
  1573. this.addItems(value);
  1574. });
  1575. },
  1576. /**
  1577. * Sets the selected item.
  1578. *
  1579. * @param {object} $item
  1580. * @param {object} e (optional)
  1581. */
  1582. setActiveItem: function($item, e) {
  1583. var self = this;
  1584. var eventName;
  1585. var i, idx, begin, end, item, swap;
  1586. var $last;
  1587. if (self.settings.mode === 'single') return;
  1588. $item = $($item);
  1589. // clear the active selection
  1590. if (!$item.length) {
  1591. $(self.$activeItems).removeClass('active');
  1592. self.$activeItems = [];
  1593. if (self.isFocused) {
  1594. self.showInput();
  1595. }
  1596. return;
  1597. }
  1598. // modify selection
  1599. eventName = e && e.type.toLowerCase();
  1600. if (eventName === 'mousedown' && self.isShiftDown && self.$activeItems.length) {
  1601. $last = self.$control.children('.active:last');
  1602. begin = Array.prototype.indexOf.apply(self.$control[0].childNodes, [$last[0]]);
  1603. end = Array.prototype.indexOf.apply(self.$control[0].childNodes, [$item[0]]);
  1604. if (begin > end) {
  1605. swap = begin;
  1606. begin = end;
  1607. end = swap;
  1608. }
  1609. for (i = begin; i <= end; i++) {
  1610. item = self.$control[0].childNodes[i];
  1611. if (self.$activeItems.indexOf(item) === -1) {
  1612. $(item).addClass('active');
  1613. self.$activeItems.push(item);
  1614. }
  1615. }
  1616. e.preventDefault();
  1617. } else if ((eventName === 'mousedown' && self.isCtrlDown) || (eventName === 'keydown' && this.isShiftDown)) {
  1618. if ($item.hasClass('active')) {
  1619. idx = self.$activeItems.indexOf($item[0]);
  1620. self.$activeItems.splice(idx, 1);
  1621. $item.removeClass('active');
  1622. } else {
  1623. self.$activeItems.push($item.addClass('active')[0]);
  1624. }
  1625. } else {
  1626. $(self.$activeItems).removeClass('active');
  1627. self.$activeItems = [$item.addClass('active')[0]];
  1628. }
  1629. // ensure control has focus
  1630. self.hideInput();
  1631. if (!this.isFocused) {
  1632. self.focus();
  1633. }
  1634. },
  1635. /**
  1636. * Sets the selected item in the dropdown menu
  1637. * of available options.
  1638. *
  1639. * @param {object} $object
  1640. * @param {boolean} scroll
  1641. * @param {boolean} animate
  1642. */
  1643. setActiveOption: function($option, scroll, animate) {
  1644. var height_menu, height_item, y;
  1645. var scroll_top, scroll_bottom;
  1646. var self = this;
  1647. if (self.$activeOption) self.$activeOption.removeClass('active');
  1648. self.$activeOption = null;
  1649. $option = $($option);
  1650. if (!$option.length) return;
  1651. self.$activeOption = $option.addClass('active');
  1652. if (scroll || !isset(scroll)) {
  1653. height_menu = self.$dropdown_content.height();
  1654. height_item = self.$activeOption.outerHeight(true);
  1655. scroll = self.$dropdown_content.scrollTop() || 0;
  1656. y = self.$activeOption.offset().top - self.$dropdown_content.offset().top + scroll;
  1657. scroll_top = y;
  1658. scroll_bottom = y - height_menu + height_item;
  1659. if (y + height_item > height_menu + scroll) {
  1660. self.$dropdown_content.stop().animate({scrollTop: scroll_bottom}, animate ? self.settings.scrollDuration : 0);
  1661. } else if (y < scroll) {
  1662. self.$dropdown_content.stop().animate({scrollTop: scroll_top}, animate ? self.settings.scrollDuration : 0);
  1663. }
  1664. }
  1665. },
  1666. /**
  1667. * Selects all items (CTRL + A).
  1668. */
  1669. selectAll: function() {
  1670. var self = this;
  1671. if (self.settings.mode === 'single') return;
  1672. self.$activeItems = Array.prototype.slice.apply(self.$control.children(':not(input)').addClass('active'));
  1673. if (self.$activeItems.length) {
  1674. self.hideInput();
  1675. self.close();
  1676. }
  1677. self.focus();
  1678. },
  1679. /**
  1680. * Hides the input element out of view, while
  1681. * retaining its focus.
  1682. */
  1683. hideInput: function() {
  1684. var self = this;
  1685. self.setTextboxValue('');
  1686. self.$control_input.css({opacity: 0, position: 'absolute', left: self.rtl ? 10000 : -10000});
  1687. self.isInputHidden = true;
  1688. },
  1689. /**
  1690. * Restores input visibility.
  1691. */
  1692. showInput: function() {
  1693. this.$control_input.css({opacity: 1, position: 'relative', left: 0});
  1694. this.isInputHidden = false;
  1695. },
  1696. /**
  1697. * Gives the control focus. If "trigger" is falsy,
  1698. * focus handlers won't be fired--causing the focus
  1699. * to happen silently in the background.
  1700. *
  1701. * @param {boolean} trigger
  1702. */
  1703. focus: function() {
  1704. var self = this;
  1705. if (self.isDisabled) return;
  1706. self.ignoreFocus = true;
  1707. self.$control_input[0].focus();
  1708. window.setTimeout(function() {
  1709. self.ignoreFocus = false;
  1710. self.onFocus();
  1711. }, 0);
  1712. },
  1713. /**
  1714. * Forces the control out of focus.
  1715. */
  1716. blur: function() {
  1717. this.$control_input.trigger('blur');
  1718. },
  1719. /**
  1720. * Returns a function that scores an object
  1721. * to show how good of a match it is to the
  1722. * provided query.
  1723. *
  1724. * @param {string} query
  1725. * @param {object} options
  1726. * @return {function}
  1727. */
  1728. getScoreFunction: function(query) {
  1729. return this.sifter.getScoreFunction(query, this.getSearchOptions());
  1730. },
  1731. /**
  1732. * Returns search options for sifter (the system
  1733. * for scoring and sorting results).
  1734. *
  1735. * @see https://github.com/brianreavis/sifter.js
  1736. * @return {object}
  1737. */
  1738. getSearchOptions: function() {
  1739. var settings = this.settings;
  1740. var sort = settings.sortField;
  1741. if (typeof sort === 'string') {
  1742. sort = {field: sort};
  1743. }
  1744. return {
  1745. fields : settings.searchField,
  1746. conjunction : settings.searchConjunction,
  1747. sort : sort
  1748. };
  1749. },
  1750. /**
  1751. * Searches through available options and returns
  1752. * a sorted array of matches.
  1753. *
  1754. * Returns an object containing:
  1755. *
  1756. * - query {string}
  1757. * - tokens {array}
  1758. * - total {int}
  1759. * - items {array}
  1760. *
  1761. * @param {string} query
  1762. * @returns {object}
  1763. */
  1764. search: function(query) {
  1765. var i, value, score, result, calculateScore;
  1766. var self = this;
  1767. var settings = self.settings;
  1768. var options = this.getSearchOptions();
  1769. // validate user-provided result scoring function
  1770. if (settings.score) {
  1771. calculateScore = self.settings.score.apply(this, [query]);
  1772. if (typeof calculateScore !== 'function') {
  1773. throw new Error('Selectize "score" setting must be a function that returns a function');
  1774. }
  1775. }
  1776. // perform search
  1777. if (query !== self.lastQuery) {
  1778. self.lastQuery = query;
  1779. result = self.sifter.search(query, $.extend(options, {score: calculateScore}));
  1780. self.currentResults = result;
  1781. } else {
  1782. result = $.extend(true, {}, self.currentResults);
  1783. }
  1784. // filter out selected items
  1785. if (settings.hideSelected) {
  1786. for (i = result.items.length - 1; i >= 0; i--) {
  1787. if (self.items.indexOf(hash_key(result.items[i].id)) !== -1) {
  1788. result.items.splice(i, 1);
  1789. }
  1790. }
  1791. }
  1792. return result;
  1793. },
  1794. /**
  1795. * Refreshes the list of available options shown
  1796. * in the autocomplete dropdown menu.
  1797. *
  1798. * @param {boolean} triggerDropdown
  1799. */
  1800. refreshOptions: function(triggerDropdown) {
  1801. var i, j, k, n, groups, groups_order, option, option_html, optgroup, optgroups, html, html_children, has_create_option;
  1802. var $active, $active_before, $create;
  1803. if (typeof triggerDropdown === 'undefined') {
  1804. triggerDropdown = true;
  1805. }
  1806. var self = this;
  1807. var query = self.$control_input.val();
  1808. var results = self.search(query);
  1809. var $dropdown_content = self.$dropdown_content;
  1810. var active_before = self.$activeOption && hash_key(self.$activeOption.attr('data-value'));
  1811. // build markup
  1812. n = results.items.length;
  1813. if (typeof self.settings.maxOptions === 'number') {
  1814. n = Math.min(n, self.settings.maxOptions);
  1815. }
  1816. // render and group available options individually
  1817. groups = {};
  1818. if (self.settings.optgroupOrder) {
  1819. groups_order = self.settings.optgroupOrder;
  1820. for (i = 0; i < groups_order.length; i++) {
  1821. groups[groups_order[i]] = [];
  1822. }
  1823. } else {
  1824. groups_order = [];
  1825. }
  1826. for (i = 0; i < n; i++) {
  1827. option = self.options[results.items[i].id];
  1828. option_html = self.render('option', option);
  1829. optgroup = option[self.settings.optgroupField] || '';
  1830. optgroups = $.isArray(optgroup) ? optgroup : [optgroup];
  1831. for (j = 0, k = optgroups && optgroups.length; j < k; j++) {
  1832. optgroup = optgroups[j];
  1833. if (!self.optgroups.hasOwnProperty(optgroup)) {
  1834. optgroup = '';
  1835. }
  1836. if (!groups.hasOwnProperty(optgroup)) {
  1837. groups[optgroup] = [];
  1838. groups_order.push(optgroup);
  1839. }
  1840. groups[optgroup].push(option_html);
  1841. }
  1842. }
  1843. // render optgroup headers & join groups
  1844. html = [];
  1845. for (i = 0, n = groups_order.length; i < n; i++) {
  1846. optgroup = groups_order[i];
  1847. if (self.optgroups.hasOwnProperty(optgroup) && groups[optgroup].length) {
  1848. // render the optgroup header and options within it,
  1849. // then pass it to the wrapper template
  1850. html_children = self.render('optgroup_header', self.optgroups[optgroup]) || '';
  1851. html_children += groups[optgroup].join('');
  1852. html.push(self.render('optgroup', $.extend({}, self.optgroups[optgroup], {
  1853. html: html_children
  1854. })));
  1855. } else {
  1856. html.push(groups[optgroup].join(''));
  1857. }
  1858. }
  1859. $dropdown_content.html(html.join(''));
  1860. // highlight matching terms inline
  1861. if (self.settings.highlight && results.query.length && results.tokens.length) {
  1862. for (i = 0, n = results.tokens.length; i < n; i++) {
  1863. highlight($dropdown_content, results.tokens[i].regex);
  1864. }
  1865. }
  1866. // add "selected" class to selected options
  1867. if (!self.settings.hideSelected) {
  1868. for (i = 0, n = self.items.length; i < n; i++) {
  1869. self.getOption(self.items[i]).addClass('selected');
  1870. }
  1871. }
  1872. // add create option
  1873. has_create_option = self.settings.create && self.canCreate(results.query);
  1874. if (has_create_option) {
  1875. $dropdown_content.prepend(self.render('option_create', {input: query}));
  1876. $create = $($dropdown_content[0].childNodes[0]);
  1877. }
  1878. // activate
  1879. self.hasOptions = results.items.length > 0 || has_create_option;
  1880. if (self.hasOptions) {
  1881. if (results.items.length > 0) {
  1882. $active_before = active_before && self.getOption(active_before);
  1883. if ($active_before && $active_before.length) {
  1884. $active = $active_before;
  1885. } else if (self.settings.mode === 'single' && self.items.length) {
  1886. $active = self.getOption(self.items[0]);
  1887. }
  1888. if (!$active || !$active.length) {
  1889. if ($create && !self.settings.addPrecedence) {
  1890. $active = self.getAdjacentOption($create, 1);
  1891. } else {
  1892. $active = $dropdown_content.find('[data-selectable]:first');
  1893. }
  1894. }
  1895. } else {
  1896. $active = $create;
  1897. }
  1898. self.setActiveOption($active);
  1899. if (triggerDropdown && !self.isOpen) { self.open(); }
  1900. } else {
  1901. self.setActiveOption(null);
  1902. if (triggerDropdown && self.isOpen) { self.close(); }
  1903. }
  1904. },
  1905. /**
  1906. * Adds an available option. If it already exists,
  1907. * nothing will happen. Note: this does not refresh
  1908. * the options list dropdown (use `refreshOptions`
  1909. * for that).
  1910. *
  1911. * Usage:
  1912. *
  1913. * this.addOption(data)
  1914. *
  1915. * @param {object} data
  1916. */
  1917. addOption: function(data) {
  1918. var i, n, optgroup, value, self = this;
  1919. if ($.isArray(data)) {
  1920. for (i = 0, n = data.length; i < n; i++) {
  1921. self.addOption(data[i]);
  1922. }
  1923. return;
  1924. }
  1925. value = hash_key(data[self.settings.valueField]);
  1926. if (typeof value !== 'string' || self.options.hasOwnProperty(value)) return;
  1927. self.userOptions[value] = true;
  1928. self.options[value] = data;
  1929. self.lastQuery = null;
  1930. self.trigger('option_add', value, data);
  1931. },
  1932. /**
  1933. * Registers a new optgroup for options
  1934. * to be bucketed into.
  1935. *
  1936. * @param {string} id
  1937. * @param {object} data
  1938. */
  1939. addOptionGroup: function(id, data) {
  1940. this.optgroups[id] = data;
  1941. this.trigger('optgroup_add', id, data);
  1942. },
  1943. /**
  1944. * Updates an option available for selection. If
  1945. * it is visible in the selected items or options
  1946. * dropdown, it will be re-rendered automatically.
  1947. *
  1948. * @param {string} value
  1949. * @param {object} data
  1950. */
  1951. updateOption: function(value, data) {
  1952. var self = this;
  1953. var $item, $item_new;
  1954. var value_new, index_item, cache_items, cache_options;
  1955. value = hash_key(value);
  1956. value_new = hash_key(data[self.settings.valueField]);
  1957. // sanity checks
  1958. if (value === null) return;
  1959. if (!self.options.hasOwnProperty(value)) return;
  1960. if (typeof value_new !== 'string') throw new Error('Value must be set in option data');
  1961. // update references
  1962. if (value_new !== value) {
  1963. delete self.options[value];
  1964. index_item = self.items.indexOf(value);
  1965. if (index_item !== -1) {
  1966. self.items.splice(index_item, 1, value_new);
  1967. }
  1968. }
  1969. self.options[value_new] = data;
  1970. // invalidate render cache
  1971. cache_items = self.renderCache['item'];
  1972. cache_options = self.renderCache['option'];
  1973. if (cache_items) {
  1974. delete cache_items[value];
  1975. delete cache_items[value_new];
  1976. }
  1977. if (cache_options) {
  1978. delete cache_options[value];
  1979. delete cache_options[value_new];
  1980. }
  1981. // update the item if it's selected
  1982. if (self.items.indexOf(value_new) !== -1) {
  1983. $item = self.getItem(value);
  1984. $item_new = $(self.render('item', data));
  1985. if ($item.hasClass('active')) $item_new.addClass('active');
  1986. $item.replaceWith($item_new);
  1987. }
  1988. // update dropdown contents
  1989. if (self.isOpen) {
  1990. self.refreshOptions(false);
  1991. }
  1992. },
  1993. /**
  1994. * Removes a single option.
  1995. *
  1996. * @param {string} value
  1997. */
  1998. removeOption: function(value) {
  1999. var self = this;
  2000. value = hash_key(value);
  2001. var cache_items = self.renderCache['item'];
  2002. var cache_options = self.renderCache['option'];
  2003. if (cache_items) delete cache_items[value];
  2004. if (cache_options) delete cache_options[value];
  2005. delete self.userOptions[value];
  2006. delete self.options[value];
  2007. self.lastQuery = null;
  2008. self.trigger('option_remove', value);
  2009. self.removeItem(value);
  2010. },
  2011. /**
  2012. * Clears all options.
  2013. */
  2014. clearOptions: function() {
  2015. var self = this;
  2016. self.loadedSearches = {};
  2017. self.userOptions = {};
  2018. self.renderCache = {};
  2019. self.options = self.sifter.items = {};
  2020. self.lastQuery = null;
  2021. self.trigger('option_clear');
  2022. self.clear();
  2023. },
  2024. /**
  2025. * Returns the jQuery element of the option
  2026. * matching the given value.
  2027. *
  2028. * @param {string} value
  2029. * @returns {object}
  2030. */
  2031. getOption: function(value) {
  2032. return this.getElementWithValue(value, this.$dropdown_content.find('[data-selectable]'));
  2033. },
  2034. /**
  2035. * Returns the jQuery element of the next or
  2036. * previous selectable option.
  2037. *
  2038. * @param {object} $option
  2039. * @param {int} direction can be 1 for next or -1 for previous
  2040. * @return {object}
  2041. */
  2042. getAdjacentOption: function($option, direction) {
  2043. var $options = this.$dropdown.find('[data-selectable]');
  2044. var index = $options.index($option) + direction;
  2045. return index >= 0 && index < $options.length ? $options.eq(index) : $();
  2046. },
  2047. /**
  2048. * Finds the first element with a "data-value" attribute
  2049. * that matches the given value.
  2050. *
  2051. * @param {mixed} value
  2052. * @param {object} $els
  2053. * @return {object}
  2054. */
  2055. getElementWithValue: function(value, $els) {
  2056. value = hash_key(value);
  2057. if (typeof value !== 'undefined' && value !== null) {
  2058. for (var i = 0, n = $els.length; i < n; i++) {
  2059. if ($els[i].getAttribute('data-value') === value) {
  2060. return $($els[i]);
  2061. }
  2062. }
  2063. }
  2064. return $();
  2065. },
  2066. /**
  2067. * Returns the jQuery element of the item
  2068. * matching the given value.
  2069. *
  2070. * @param {string} value
  2071. * @returns {object}
  2072. */
  2073. getItem: function(value) {
  2074. return this.getElementWithValue(value, this.$control.children());
  2075. },
  2076. /**
  2077. * "Selects" multiple items at once. Adds them to the list
  2078. * at the current caret position.
  2079. *
  2080. * @param {string} value
  2081. */
  2082. addItems: function(values) {
  2083. var items = $.isArray(values) ? values : [values];
  2084. for (var i = 0, n = items.length; i < n; i++) {
  2085. this.isPending = (i < n - 1);
  2086. this.addItem(items[i]);
  2087. }
  2088. },
  2089. /**
  2090. * "Selects" an item. Adds it to the list
  2091. * at the current caret position.
  2092. *
  2093. * @param {string} value
  2094. */
  2095. addItem: function(value) {
  2096. debounce_events(this, ['change'], function() {
  2097. var $item, $option, $options;
  2098. var self = this;
  2099. var inputMode = self.settings.mode;
  2100. var i, active, value_next, wasFull;
  2101. value = hash_key(value);
  2102. if (self.items.indexOf(value) !== -1) {
  2103. if (inputMode === 'single') self.close();
  2104. return;
  2105. }
  2106. if (!self.options.hasOwnProperty(value)) return;
  2107. if (inputMode === 'single') self.clear();
  2108. if (inputMode === 'multi' && self.isFull()) return;
  2109. $item = $(self.render('item', self.options[value]));
  2110. wasFull = self.isFull();
  2111. self.items.splice(self.caretPos, 0, value);
  2112. self.insertAtCaret($item);
  2113. if (!self.isPending || (!wasFull && self.isFull())) {
  2114. self.refreshState();
  2115. }
  2116. if (self.isSetup) {
  2117. $options = self.$dropdown_content.find('[data-selectable]');
  2118. // update menu / remove the option (if this is not one item being added as part of series)
  2119. if (!self.isPending) {
  2120. $option = self.getOption(value);
  2121. value_next = self.getAdjacentOption($option, 1).attr('data-value');
  2122. self.refreshOptions(self.isFocused && inputMode !== 'single');
  2123. if (value_next) {
  2124. self.setActiveOption(self.getOption(value_next));
  2125. }
  2126. }
  2127. // hide the menu if the maximum number of items have been selected or no options are left
  2128. if (!$options.length || self.isFull()) {
  2129. self.close();
  2130. } else {
  2131. self.positionDropdown();
  2132. }
  2133. self.updatePlaceholder();
  2134. self.trigger('item_add', value, $item);
  2135. self.updateOriginalInput();
  2136. }
  2137. });
  2138. },
  2139. /**
  2140. * Removes the selected item matching
  2141. * the provided value.
  2142. *
  2143. * @param {string} value
  2144. */
  2145. removeItem: function(value) {
  2146. var self = this;
  2147. var $item, i, idx;
  2148. $item = (typeof value === 'object') ? value : self.getItem(value);
  2149. value = hash_key($item.attr('data-value'));
  2150. i = self.items.indexOf(value);
  2151. if (i !== -1) {
  2152. $item.remove();
  2153. if ($item.hasClass('active')) {
  2154. idx = self.$activeItems.indexOf($item[0]);
  2155. self.$activeItems.splice(idx, 1);
  2156. }
  2157. self.items.splice(i, 1);
  2158. self.lastQuery = null;
  2159. if (!self.settings.persist && self.userOptions.hasOwnProperty(value)) {
  2160. self.removeOption(value);
  2161. }
  2162. if (i < self.caretPos) {
  2163. self.setCaret(self.caretPos - 1);
  2164. }
  2165. self.refreshState();
  2166. self.updatePlaceholder();
  2167. self.updateOriginalInput();
  2168. self.positionDropdown();
  2169. self.trigger('item_remove', value);
  2170. }
  2171. },
  2172. /**
  2173. * Invokes the `create` method provided in the
  2174. * selectize options that should provide the data
  2175. * for the new item, given the user input.
  2176. *
  2177. * Once this completes, it will be added
  2178. * to the item list.
  2179. *
  2180. * @return {boolean}
  2181. */
  2182. createItem: function(triggerDropdown) {
  2183. var self = this;
  2184. var input = $.trim(self.$control_input.val() || '');
  2185. var caret = self.caretPos;
  2186. if (!self.canCreate(input)) return false;
  2187. self.lock();
  2188. if (typeof triggerDropdown === 'undefined') {
  2189. triggerDropdown = true;
  2190. }
  2191. var setup = (typeof self.settings.create === 'function') ? this.settings.create : function(input) {
  2192. var data = {};
  2193. data[self.settings.labelField] = input;
  2194. data[self.settings.valueField] = input;
  2195. return data;
  2196. };
  2197. var create = once(function(data) {
  2198. self.unlock();
  2199. if (!data || typeof data !== 'object') return;
  2200. var value = hash_key(data[self.settings.valueField]);
  2201. if (typeof value !== 'string') return;
  2202. self.setTextboxValue('');
  2203. self.addOption(data);
  2204. self.setCaret(caret);
  2205. self.addItem(value);
  2206. self.refreshOptions(triggerDropdown && self.settings.mode !== 'single');
  2207. });
  2208. var output = setup.apply(this, [input, create]);
  2209. if (typeof output !== 'undefined') {
  2210. create(output);
  2211. }
  2212. return true;
  2213. },
  2214. /**
  2215. * Re-renders the selected item lists.
  2216. */
  2217. refreshItems: function() {
  2218. this.lastQuery = null;
  2219. if (this.isSetup) {
  2220. for (var i = 0; i < this.items.length; i++) {
  2221. this.addItem(this.items);
  2222. }
  2223. }
  2224. this.refreshState();
  2225. this.updateOriginalInput();
  2226. },
  2227. /**
  2228. * Updates all state-dependent attributes
  2229. * and CSS classes.
  2230. */
  2231. refreshState: function() {
  2232. var invalid, self = this;
  2233. if (self.isRequired) {
  2234. if (self.items.length) self.isInvalid = false;
  2235. self.$control_input.prop('required', invalid);
  2236. }
  2237. self.refreshClasses();
  2238. },
  2239. /**
  2240. * Updates all state-dependent CSS classes.
  2241. */
  2242. refreshClasses: function() {
  2243. var self = this;
  2244. var isFull = self.isFull();
  2245. var isLocked = self.isLocked;
  2246. self.$wrapper
  2247. .toggleClass('rtl', self.rtl);
  2248. self.$control
  2249. .toggleClass('focus', self.isFocused)
  2250. .toggleClass('disabled', self.isDisabled)
  2251. .toggleClass('required', self.isRequired)
  2252. .toggleClass('invalid', self.isInvalid)
  2253. .toggleClass('locked', isLocked)
  2254. .toggleClass('full', isFull).toggleClass('not-full', !isFull)
  2255. .toggleClass('input-active', self.isFocused && !self.isInputHidden)
  2256. .toggleClass('dropdown-active', self.isOpen)
  2257. .toggleClass('has-options', !$.isEmptyObject(self.options))
  2258. .toggleClass('has-items', self.items.length > 0);
  2259. self.$control_input.data('grow', !isFull && !isLocked);
  2260. },
  2261. /**
  2262. * Determines whether or not more items can be added
  2263. * to the control without exceeding the user-defined maximum.
  2264. *
  2265. * @returns {boolean}
  2266. */
  2267. isFull: function() {
  2268. return this.settings.maxItems !== null && this.items.length >= this.settings.maxItems;
  2269. },
  2270. /**
  2271. * Refreshes the original <select> or <input>
  2272. * element to reflect the current state.
  2273. */
  2274. updateOriginalInput: function() {
  2275. var i, n, options, self = this;
  2276. if (self.tagType === TAG_SELECT) {
  2277. options = [];
  2278. for (i = 0, n = self.items.length; i < n; i++) {
  2279. options.push('<option value="' + escape_html(self.items[i]) + '" selected="selected"></option>');
  2280. }
  2281. if (!options.length && !this.$input.attr('multiple')) {
  2282. options.push('<option value="" selected="selected"></option>');
  2283. }
  2284. self.$input.html(options.join(''));
  2285. } else {
  2286. self.$input.val(self.getValue());
  2287. self.$input.attr('value',self.$input.val());
  2288. }
  2289. if (self.isSetup) {
  2290. self.trigger('change', self.$input.val());
  2291. }
  2292. },
  2293. /**
  2294. * Shows/hide the input placeholder depending
  2295. * on if there items in the list already.
  2296. */
  2297. updatePlaceholder: function() {
  2298. if (!this.settings.placeholder) return;
  2299. var $input = this.$control_input;
  2300. if (this.items.length) {
  2301. $input.removeAttr('placeholder');
  2302. } else {
  2303. $input.attr('placeholder', this.settings.placeholder);
  2304. }
  2305. $input.triggerHandler('update', {force: true});
  2306. },
  2307. /**
  2308. * Shows the autocomplete dropdown containing
  2309. * the available options.
  2310. */
  2311. open: function() {
  2312. var self = this;
  2313. if (self.isLocked || self.isOpen || (self.settings.mode === 'multi' && self.isFull())) return;
  2314. self.focus();
  2315. self.isOpen = true;
  2316. self.refreshState();
  2317. self.$dropdown.css({visibility: 'hidden', display: 'block'});
  2318. self.positionDropdown();
  2319. self.$dropdown.css({visibility: 'visible'});
  2320. self.trigger('dropdown_open', self.$dropdown);
  2321. },
  2322. /**
  2323. * Closes the autocomplete dropdown menu.
  2324. */
  2325. close: function() {
  2326. var self = this;
  2327. var trigger = self.isOpen;
  2328. if (self.settings.mode === 'single' && self.items.length) {
  2329. self.hideInput();
  2330. }
  2331. self.isOpen = false;
  2332. self.$dropdown.hide();
  2333. self.setActiveOption(null);
  2334. self.refreshState();
  2335. if (trigger) self.trigger('dropdown_close', self.$dropdown);
  2336. },
  2337. /**
  2338. * Calculates and applies the appropriate
  2339. * position of the dropdown.
  2340. */
  2341. positionDropdown: function() {
  2342. var $control = this.$control;
  2343. var offset = this.settings.dropdownParent === 'body' ? $control.offset() : $control.position();
  2344. offset.top += $control.outerHeight(true);
  2345. this.$dropdown.css({
  2346. width : $control.outerWidth(),
  2347. top : offset.top,
  2348. left : offset.left
  2349. });
  2350. },
  2351. /**
  2352. * Resets / clears all selected items
  2353. * from the control.
  2354. */
  2355. clear: function() {
  2356. var self = this;
  2357. if (!self.items.length) return;
  2358. self.$control.children(':not(input)').remove();
  2359. self.items = [];
  2360. self.lastQuery = null;
  2361. self.setCaret(0);
  2362. self.setActiveItem(null);
  2363. self.updatePlaceholder();
  2364. self.updateOriginalInput();
  2365. self.refreshState();
  2366. self.showInput();
  2367. self.trigger('clear');
  2368. },
  2369. /**
  2370. * A helper method for inserting an element
  2371. * at the current caret position.
  2372. *
  2373. * @param {object} $el
  2374. */
  2375. insertAtCaret: function($el) {
  2376. var caret = Math.min(this.caretPos, this.items.length);
  2377. if (caret === 0) {
  2378. this.$control.prepend($el);
  2379. } else {
  2380. $(this.$control[0].childNodes[caret]).before($el);
  2381. }
  2382. this.setCaret(caret + 1);
  2383. },
  2384. /**
  2385. * Removes the current selected item(s).
  2386. *
  2387. * @param {object} e (optional)
  2388. * @returns {boolean}
  2389. */
  2390. deleteSelection: function(e) {
  2391. var i, n, direction, selection, values, caret, option_select, $option_select, $tail;
  2392. var self = this;
  2393. direction = (e && e.keyCode === KEY_BACKSPACE) ? -1 : 1;
  2394. selection = getSelection(self.$control_input[0]);
  2395. if (self.$activeOption && !self.settings.hideSelected) {
  2396. option_select = self.getAdjacentOption(self.$activeOption, -1).attr('data-value');
  2397. }
  2398. // determine items that will be removed
  2399. values = [];
  2400. if (self.$activeItems.length) {
  2401. $tail = self.$control.children('.active:' + (direction > 0 ? 'last' : 'first'));
  2402. caret = self.$control.children(':not(input)').index($tail);
  2403. if (direction > 0) { caret++; }
  2404. for (i = 0, n = self.$activeItems.length; i < n; i++) {
  2405. values.push($(self.$activeItems[i]).attr('data-value'));
  2406. }
  2407. if (e) {
  2408. e.preventDefault();
  2409. e.stopPropagation();
  2410. }
  2411. } else if ((self.isFocused || self.settings.mode === 'single') && self.items.length) {
  2412. if (direction < 0 && selection.start === 0 && selection.length === 0) {
  2413. values.push(self.items[self.caretPos - 1]);
  2414. } else if (direction > 0 && selection.start === self.$control_input.val().length) {
  2415. values.push(self.items[self.caretPos]);
  2416. }
  2417. }
  2418. // allow the callback to abort
  2419. if (!values.length || (typeof self.settings.onDelete === 'function' && self.settings.onDelete.apply(self, [values]) === false)) {
  2420. return false;
  2421. }
  2422. // perform removal
  2423. if (typeof caret !== 'undefined') {
  2424. self.setCaret(caret);
  2425. }
  2426. while (values.length) {
  2427. self.removeItem(values.pop());
  2428. }
  2429. self.showInput();
  2430. self.positionDropdown();
  2431. self.refreshOptions(true);
  2432. // select previous option
  2433. if (option_select) {
  2434. $option_select = self.getOption(option_select);
  2435. if ($option_select.length) {
  2436. self.setActiveOption($option_select);
  2437. }
  2438. }
  2439. return true;
  2440. },
  2441. /**
  2442. * Selects the previous / next item (depending
  2443. * on the `direction` argument).
  2444. *
  2445. * > 0 - right
  2446. * < 0 - left
  2447. *
  2448. * @param {int} direction
  2449. * @param {object} e (optional)
  2450. */
  2451. advanceSelection: function(direction, e) {
  2452. var tail, selection, idx, valueLength, cursorAtEdge, $tail;
  2453. var self = this;
  2454. if (direction === 0) return;
  2455. if (self.rtl) direction *= -1;
  2456. tail = direction > 0 ? 'last' : 'first';
  2457. selection = getSelection(self.$control_input[0]);
  2458. if (self.isFocused && !self.isInputHidden) {
  2459. valueLength = self.$control_input.val().length;
  2460. cursorAtEdge = direction < 0
  2461. ? selection.start === 0 && selection.length === 0
  2462. : selection.start === valueLength;
  2463. if (cursorAtEdge && !valueLength) {
  2464. self.advanceCaret(direction, e);
  2465. }
  2466. } else {
  2467. $tail = self.$control.children('.active:' + tail);
  2468. if ($tail.length) {
  2469. idx = self.$control.children(':not(input)').index($tail);
  2470. self.setActiveItem(null);
  2471. self.setCaret(direction > 0 ? idx + 1 : idx);
  2472. }
  2473. }
  2474. },
  2475. /**
  2476. * Moves the caret left / right.
  2477. *
  2478. * @param {int} direction
  2479. * @param {object} e (optional)
  2480. */
  2481. advanceCaret: function(direction, e) {
  2482. var self = this, fn, $adj;
  2483. if (direction === 0) return;
  2484. fn = direction > 0 ? 'next' : 'prev';
  2485. if (self.isShiftDown) {
  2486. $adj = self.$control_input[fn]();
  2487. if ($adj.length) {
  2488. self.hideInput();
  2489. self.setActiveItem($adj);
  2490. e && e.preventDefault();
  2491. }
  2492. } else {
  2493. self.setCaret(self.caretPos + direction);
  2494. }
  2495. },
  2496. /**
  2497. * Moves the caret to the specified index.
  2498. *
  2499. * @param {int} i
  2500. */
  2501. setCaret: function(i) {
  2502. var self = this;
  2503. if (self.settings.mode === 'single') {
  2504. i = self.items.length;
  2505. } else {
  2506. i = Math.max(0, Math.min(self.items.length, i));
  2507. }
  2508. if(!self.isPending) {
  2509. // the input must be moved by leaving it in place and moving the
  2510. // siblings, due to the fact that focus cannot be restored once lost
  2511. // on mobile webkit devices
  2512. var j, n, fn, $children, $child;
  2513. $children = self.$control.children(':not(input)');
  2514. for (j = 0, n = $children.length; j < n; j++) {
  2515. $child = $($children[j]).detach();
  2516. if (j < i) {
  2517. self.$control_input.before($child);
  2518. } else {
  2519. self.$control.append($child);
  2520. }
  2521. }
  2522. }
  2523. self.caretPos = i;
  2524. },
  2525. /**
  2526. * Disables user input on the control. Used while
  2527. * items are being asynchronously created.
  2528. */
  2529. lock: function() {
  2530. this.close();
  2531. this.isLocked = true;
  2532. this.refreshState();
  2533. },
  2534. /**
  2535. * Re-enables user input on the control.
  2536. */
  2537. unlock: function() {
  2538. this.isLocked = false;
  2539. this.refreshState();
  2540. },
  2541. /**
  2542. * Disables user input on the control completely.
  2543. * While disabled, it cannot receive focus.
  2544. */
  2545. disable: function() {
  2546. var self = this;
  2547. self.$input.prop('disabled', true);
  2548. self.isDisabled = true;
  2549. self.lock();
  2550. },
  2551. /**
  2552. * Enables the control so that it can respond
  2553. * to focus and user input.
  2554. */
  2555. enable: function() {
  2556. var self = this;
  2557. self.$input.prop('disabled', false);
  2558. self.isDisabled = false;
  2559. self.unlock();
  2560. },
  2561. /**
  2562. * Completely destroys the control and
  2563. * unbinds all event listeners so that it can
  2564. * be garbage collected.
  2565. */
  2566. destroy: function() {
  2567. var self = this;
  2568. var eventNS = self.eventNS;
  2569. var revertSettings = self.revertSettings;
  2570. self.trigger('destroy');
  2571. self.off();
  2572. self.$wrapper.remove();
  2573. self.$dropdown.remove();
  2574. self.$input
  2575. .html('')
  2576. .append(revertSettings.$children)
  2577. .removeAttr('tabindex')
  2578. .removeClass('selectized')
  2579. .attr({tabindex: revertSettings.tabindex})
  2580. .show();
  2581. self.$control_input.removeData('grow');
  2582. self.$input.removeData('selectize');
  2583. $(window).off(eventNS);
  2584. $(document).off(eventNS);
  2585. $(document.body).off(eventNS);
  2586. delete self.$input[0].selectize;
  2587. },
  2588. /**
  2589. * A helper method for rendering "item" and
  2590. * "option" templates, given the data.
  2591. *
  2592. * @param {string} templateName
  2593. * @param {object} data
  2594. * @returns {string}
  2595. */
  2596. render: function(templateName, data) {
  2597. var value, id, label;
  2598. var html = '';
  2599. var cache = false;
  2600. var self = this;
  2601. var regex_tag = /^[\t ]*<([a-z][a-z0-9\-_]*(?:\:[a-z][a-z0-9\-_]*)?)/i;
  2602. if (templateName === 'option' || templateName === 'item') {
  2603. value = hash_key(data[self.settings.valueField]);
  2604. cache = !!value;
  2605. }
  2606. // pull markup from cache if it exists
  2607. if (cache) {
  2608. if (!isset(self.renderCache[templateName])) {
  2609. self.renderCache[templateName] = {};
  2610. }
  2611. if (self.renderCache[templateName].hasOwnProperty(value)) {
  2612. return self.renderCache[templateName][value];
  2613. }
  2614. }
  2615. // render markup
  2616. html = self.settings.render[templateName].apply(this, [data, escape_html]);
  2617. // add mandatory attributes
  2618. if (templateName === 'option' || templateName === 'option_create') {
  2619. html = html.replace(regex_tag, '<$1 data-selectable');
  2620. }
  2621. if (templateName === 'optgroup') {
  2622. id = data[self.settings.optgroupValueField] || '';
  2623. html = html.replace(regex_tag, '<$1 data-group="' + escape_replace(escape_html(id)) + '"');
  2624. }
  2625. if (templateName === 'option' || templateName === 'item') {
  2626. html = html.replace(regex_tag, '<$1 data-value="' + escape_replace(escape_html(value || '')) + '"');
  2627. }
  2628. // update cache
  2629. if (cache) {
  2630. self.renderCache[templateName][value] = html;
  2631. }
  2632. return html;
  2633. },
  2634. /**
  2635. * Clears the render cache for a template. If
  2636. * no template is given, clears all render
  2637. * caches.
  2638. *
  2639. * @param {string} templateName
  2640. */
  2641. clearCache: function(templateName) {
  2642. var self = this;
  2643. if (typeof templateName === 'undefined') {
  2644. self.renderCache = {};
  2645. } else {
  2646. delete self.renderCache[templateName];
  2647. }
  2648. }
  2649. });
  2650. Selectize.count = 0;
  2651. Selectize.defaults = {
  2652. plugins: [],
  2653. delimiter: ',',
  2654. persist: true,
  2655. diacritics: true,
  2656. create: false,
  2657. createOnBlur: false,
  2658. createFilter: null,
  2659. highlight: true,
  2660. openOnFocus: true,
  2661. maxOptions: 1000,
  2662. maxItems: null,
  2663. hideSelected: null,
  2664. addPrecedence: false,
  2665. selectOnTab: false,
  2666. preload: false,
  2667. allowEmptyOption: false,
  2668. scrollDuration: 60,
  2669. loadThrottle: 300,
  2670. dataAttr: 'data-data',
  2671. optgroupField: 'optgroup',
  2672. valueField: 'value',
  2673. labelField: 'text',
  2674. optgroupLabelField: 'label',
  2675. optgroupValueField: 'value',
  2676. optgroupOrder: null,
  2677. sortField: '$order',
  2678. searchField: ['text'],
  2679. searchConjunction: 'and',
  2680. mode: null,
  2681. wrapperClass: 'selectize-control',
  2682. inputClass: 'selectize-input',
  2683. dropdownClass: 'selectize-dropdown',
  2684. dropdownContentClass: 'selectize-dropdown-content',
  2685. dropdownParent: null,
  2686. /*
  2687. load : null, // function(query, callback) { ... }
  2688. score : null, // function(search) { ... }
  2689. onInitialize : null, // function() { ... }
  2690. onChange : null, // function(value) { ... }
  2691. onItemAdd : null, // function(value, $item) { ... }
  2692. onItemRemove : null, // function(value) { ... }
  2693. onClear : null, // function() { ... }
  2694. onOptionAdd : null, // function(value, data) { ... }
  2695. onOptionRemove : null, // function(value) { ... }
  2696. onOptionClear : null, // function() { ... }
  2697. onDropdownOpen : null, // function($dropdown) { ... }
  2698. onDropdownClose : null, // function($dropdown) { ... }
  2699. onType : null, // function(str) { ... }
  2700. onDelete : null, // function(values) { ... }
  2701. */
  2702. render: {
  2703. /*
  2704. item: null,
  2705. optgroup: null,
  2706. optgroup_header: null,
  2707. option: null,
  2708. option_create: null
  2709. */
  2710. }
  2711. };
  2712. $.fn.selectize = function(settings_user) {
  2713. var defaults = $.fn.selectize.defaults;
  2714. var settings = $.extend({}, defaults, settings_user);
  2715. var attr_data = settings.dataAttr;
  2716. var field_label = settings.labelField;
  2717. var field_value = settings.valueField;
  2718. var field_optgroup = settings.optgroupField;
  2719. var field_optgroup_label = settings.optgroupLabelField;
  2720. var field_optgroup_value = settings.optgroupValueField;
  2721. /**
  2722. * Initializes selectize from a <input type="text"> element.
  2723. *
  2724. * @param {object} $input
  2725. * @param {object} settings_element
  2726. */
  2727. var init_textbox = function($input, settings_element) {
  2728. var i, n, values, option, value = $.trim($input.val() || '');
  2729. if (!settings.allowEmptyOption && !value.length) return;
  2730. values = value.split(settings.delimiter);
  2731. for (i = 0, n = values.length; i < n; i++) {
  2732. option = {};
  2733. option[field_label] = values[i];
  2734. option[field_value] = values[i];
  2735. settings_element.options[values[i]] = option;
  2736. }
  2737. settings_element.items = values;
  2738. };
  2739. /**
  2740. * Initializes selectize from a <select> element.
  2741. *
  2742. * @param {object} $input
  2743. * @param {object} settings_element
  2744. */
  2745. var init_select = function($input, settings_element) {
  2746. var i, n, tagName, $children, order = 0;
  2747. var options = settings_element.options;
  2748. var readData = function($el) {
  2749. var data = attr_data && $el.attr(attr_data);
  2750. if (typeof data === 'string' && data.length) {
  2751. return JSON.parse(data);
  2752. }
  2753. return null;
  2754. };
  2755. var addOption = function($option, group) {
  2756. var value, option;
  2757. $option = $($option);
  2758. value = $option.attr('value') || '';
  2759. if (!value.length && !settings.allowEmptyOption) return;
  2760. // if the option already exists, it's probably been
  2761. // duplicated in another optgroup. in this case, push
  2762. // the current group to the "optgroup" property on the
  2763. // existing option so that it's rendered in both places.
  2764. if (options.hasOwnProperty(value)) {
  2765. if (group) {
  2766. if (!options[value].optgroup) {
  2767. options[value].optgroup = group;
  2768. } else if (!$.isArray(options[value].optgroup)) {
  2769. options[value].optgroup = [options[value].optgroup, group];
  2770. } else {
  2771. options[value].optgroup.push(group);
  2772. }
  2773. }
  2774. return;
  2775. }
  2776. option = readData($option) || {};
  2777. option[field_label] = option[field_label] || $option.text();
  2778. option[field_value] = option[field_value] || value;
  2779. option[field_optgroup] = option[field_optgroup] || group;
  2780. option.$order = ++order;
  2781. options[value] = option;
  2782. if ($option.is(':selected')) {
  2783. settings_element.items.push(value);
  2784. }
  2785. };
  2786. var addGroup = function($optgroup) {
  2787. var i, n, id, optgroup, $options;
  2788. $optgroup = $($optgroup);
  2789. id = $optgroup.attr('label');
  2790. if (id) {
  2791. optgroup = readData($optgroup) || {};
  2792. optgroup[field_optgroup_label] = id;
  2793. optgroup[field_optgroup_value] = id;
  2794. settings_element.optgroups[id] = optgroup;
  2795. }
  2796. $options = $('option', $optgroup);
  2797. for (i = 0, n = $options.length; i < n; i++) {
  2798. addOption($options[i], id);
  2799. }
  2800. };
  2801. settings_element.maxItems = $input.attr('multiple') ? null : 1;
  2802. $children = $input.children();
  2803. for (i = 0, n = $children.length; i < n; i++) {
  2804. tagName = $children[i].tagName.toLowerCase();
  2805. if (tagName === 'optgroup') {
  2806. addGroup($children[i]);
  2807. } else if (tagName === 'option') {
  2808. addOption($children[i]);
  2809. }
  2810. }
  2811. };
  2812. return this.each(function() {
  2813. if (this.selectize) return;
  2814. var instance;
  2815. var $input = $(this);
  2816. var tag_name = this.tagName.toLowerCase();
  2817. var placeholder = $input.attr('placeholder') || $input.attr('data-placeholder');
  2818. if (!placeholder && !settings.allowEmptyOption) {
  2819. placeholder = $input.children('option[value=""]').text();
  2820. }
  2821. var settings_element = {
  2822. 'placeholder' : placeholder,
  2823. 'options' : {},
  2824. 'optgroups' : {},
  2825. 'items' : []
  2826. };
  2827. if (tag_name === 'select') {
  2828. init_select($input, settings_element);
  2829. } else {
  2830. init_textbox($input, settings_element);
  2831. }
  2832. instance = new Selectize($input, $.extend(true, {}, defaults, settings_element, settings_user));
  2833. });
  2834. };
  2835. $.fn.selectize.defaults = Selectize.defaults;
  2836. Selectize.define('drag_drop', function(options) {
  2837. if (!$.fn.sortable) throw new Error('The "drag_drop" plugin requires jQuery UI "sortable".');
  2838. if (this.settings.mode !== 'multi') return;
  2839. var self = this;
  2840. self.lock = (function() {
  2841. var original = self.lock;
  2842. return function() {
  2843. var sortable = self.$control.data('sortable');
  2844. if (sortable) sortable.disable();
  2845. return original.apply(self, arguments);
  2846. };
  2847. })();
  2848. self.unlock = (function() {
  2849. var original = self.unlock;
  2850. return function() {
  2851. var sortable = self.$control.data('sortable');
  2852. if (sortable) sortable.enable();
  2853. return original.apply(self, arguments);
  2854. };
  2855. })();
  2856. self.setup = (function() {
  2857. var original = self.setup;
  2858. return function() {
  2859. original.apply(this, arguments);
  2860. var $control = self.$control.sortable({
  2861. items: '[data-value]',
  2862. forcePlaceholderSize: true,
  2863. disabled: self.isLocked,
  2864. start: function(e, ui) {
  2865. ui.placeholder.css('width', ui.helper.css('width'));
  2866. $control.css({overflow: 'visible'});
  2867. },
  2868. stop: function() {
  2869. $control.css({overflow: 'hidden'});
  2870. var active = self.$activeItems ? self.$activeItems.slice() : null;
  2871. var values = [];
  2872. $control.children('[data-value]').each(function() {
  2873. values.push($(this).attr('data-value'));
  2874. });
  2875. self.setValue(values);
  2876. self.setActiveItem(active);
  2877. }
  2878. });
  2879. };
  2880. })();
  2881. });
  2882. Selectize.define('dropdown_header', function(options) {
  2883. var self = this;
  2884. options = $.extend({
  2885. title : 'Untitled',
  2886. headerClass : 'selectize-dropdown-header',
  2887. titleRowClass : 'selectize-dropdown-header-title',
  2888. labelClass : 'selectize-dropdown-header-label',
  2889. closeClass : 'selectize-dropdown-header-close',
  2890. html: function(data) {
  2891. return (
  2892. '<div class="' + data.headerClass + '">' +
  2893. '<div class="' + data.titleRowClass + '">' +
  2894. '<span class="' + data.labelClass + '">' + data.title + '</span>' +
  2895. '<a href="javascript:void(0)" class="' + data.closeClass + '">&times;</a>' +
  2896. '</div>' +
  2897. '</div>'
  2898. );
  2899. }
  2900. }, options);
  2901. self.setup = (function() {
  2902. var original = self.setup;
  2903. return function() {
  2904. original.apply(self, arguments);
  2905. self.$dropdown_header = $(options.html(options));
  2906. self.$dropdown.prepend(self.$dropdown_header);
  2907. };
  2908. })();
  2909. });
  2910. Selectize.define('optgroup_columns', function(options) {
  2911. var self = this;
  2912. options = $.extend({
  2913. equalizeWidth : true,
  2914. equalizeHeight : true
  2915. }, options);
  2916. this.getAdjacentOption = function($option, direction) {
  2917. var $options = $option.closest('[data-group]').find('[data-selectable]');
  2918. var index = $options.index($option) + direction;
  2919. return index >= 0 && index < $options.length ? $options.eq(index) : $();
  2920. };
  2921. this.onKeyDown = (function() {
  2922. var original = self.onKeyDown;
  2923. return function(e) {
  2924. var index, $option, $options, $optgroup;
  2925. if (this.isOpen && (e.keyCode === KEY_LEFT || e.keyCode === KEY_RIGHT)) {
  2926. self.ignoreHover = true;
  2927. $optgroup = this.$activeOption.closest('[data-group]');
  2928. index = $optgroup.find('[data-selectable]').index(this.$activeOption);
  2929. if(e.keyCode === KEY_LEFT) {
  2930. $optgroup = $optgroup.prev('[data-group]');
  2931. } else {
  2932. $optgroup = $optgroup.next('[data-group]');
  2933. }
  2934. $options = $optgroup.find('[data-selectable]');
  2935. $option = $options.eq(Math.min($options.length - 1, index));
  2936. if ($option.length) {
  2937. this.setActiveOption($option);
  2938. }
  2939. return;
  2940. }
  2941. return original.apply(this, arguments);
  2942. };
  2943. })();
  2944. var getScrollbarWidth = function() {
  2945. var div;
  2946. var width = getScrollbarWidth.width;
  2947. var doc = document;
  2948. if (typeof width === 'undefined') {
  2949. div = doc.createElement('div');
  2950. div.innerHTML = '<div style="width:50px;height:50px;position:absolute;left:-50px;top:-50px;overflow:auto;"><div style="width:1px;height:100px;"></div></div>';
  2951. div = div.firstChild;
  2952. doc.body.appendChild(div);
  2953. width = getScrollbarWidth.width = div.offsetWidth - div.clientWidth;
  2954. doc.body.removeChild(div);
  2955. }
  2956. return width;
  2957. };
  2958. var equalizeSizes = function() {
  2959. var i, n, height_max, width, width_last, width_parent, $optgroups;
  2960. $optgroups = $('[data-group]', self.$dropdown_content);
  2961. n = $optgroups.length;
  2962. if (!n || !self.$dropdown_content.width()) return;
  2963. if (options.equalizeHeight) {
  2964. height_max = 0;
  2965. for (i = 0; i < n; i++) {
  2966. height_max = Math.max(height_max, $optgroups.eq(i).height());
  2967. }
  2968. $optgroups.css({height: height_max});
  2969. }
  2970. if (options.equalizeWidth) {
  2971. width_parent = self.$dropdown_content.innerWidth() - getScrollbarWidth();
  2972. width = Math.round(width_parent / n);
  2973. $optgroups.css({width: width});
  2974. if (n > 1) {
  2975. width_last = width_parent - width * (n - 1);
  2976. $optgroups.eq(n - 1).css({width: width_last});
  2977. }
  2978. }
  2979. };
  2980. if (options.equalizeHeight || options.equalizeWidth) {
  2981. hook.after(this, 'positionDropdown', equalizeSizes);
  2982. hook.after(this, 'refreshOptions', equalizeSizes);
  2983. }
  2984. });
  2985. Selectize.define('remove_button', function(options) {
  2986. if (this.settings.mode === 'single') return;
  2987. options = $.extend({
  2988. label : '&times;',
  2989. title : 'Remove',
  2990. className : 'remove',
  2991. append : true
  2992. }, options);
  2993. var self = this;
  2994. var html = '<a href="javascript:void(0)" class="' + options.className + '" tabindex="-1" title="' + escape_html(options.title) + '">' + options.label + '</a>';
  2995. /**
  2996. * Appends an element as a child (with raw HTML).
  2997. *
  2998. * @param {string} html_container
  2999. * @param {string} html_element
  3000. * @return {string}
  3001. */
  3002. var append = function(html_container, html_element) {
  3003. var pos = html_container.search(/(<\/[^>]+>\s*)$/);
  3004. return html_container.substring(0, pos) + html_element + html_container.substring(pos);
  3005. };
  3006. this.setup = (function() {
  3007. var original = self.setup;
  3008. return function() {
  3009. // override the item rendering method to add the button to each
  3010. if (options.append) {
  3011. var render_item = self.settings.render.item;
  3012. self.settings.render.item = function(data) {
  3013. return append(render_item.apply(this, arguments), html);
  3014. };
  3015. }
  3016. original.apply(this, arguments);
  3017. // add event listener
  3018. this.$control.on('click', '.' + options.className, function(e) {
  3019. e.preventDefault();
  3020. if (self.isLocked) return;
  3021. var $item = $(e.currentTarget).parent();
  3022. self.setActiveItem($item);
  3023. if (self.deleteSelection()) {
  3024. self.setCaret(self.items.length);
  3025. }
  3026. });
  3027. };
  3028. })();
  3029. });
  3030. Selectize.define('restore_on_backspace', function(options) {
  3031. var self = this;
  3032. options.text = options.text || function(option) {
  3033. return option[this.settings.labelField];
  3034. };
  3035. this.onKeyDown = (function(e) {
  3036. var original = self.onKeyDown;
  3037. return function(e) {
  3038. var index, option;
  3039. if (e.keyCode === KEY_BACKSPACE && this.$control_input.val() === '' && !this.$activeItems.length) {
  3040. index = this.caretPos - 1;
  3041. if (index >= 0 && index < this.items.length) {
  3042. option = this.options[this.items[index]];
  3043. if (this.deleteSelection(e)) {
  3044. this.setTextboxValue(options.text.apply(this, [option]));
  3045. this.refreshOptions(true);
  3046. }
  3047. e.preventDefault();
  3048. return;
  3049. }
  3050. }
  3051. return original.apply(this, arguments);
  3052. };
  3053. })();
  3054. });
  3055. return Selectize;
  3056. }));