selectize.js 86 KB

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