blazer 0.0.8 → 1.0.0

data/app/assets/javascripts/blazer/selectize.js

@@ -221,7 +221,7 @@
      * @param  {object} result
      * @return {mixed}
      */
-    get_field  = function(name, result) {
+    get_field = function(name, result) {
       if (name === '$score') return result.score;
       return self.items[result.id][name];
     };
@@ -391,8 +391,8 @@
     if (typeof a === 'number' && typeof b === 'number') {
       return a > b ? 1 : (a < b ? -1 : 0);
     }
-    a = String(a || '').toLowerCase();
-    b = String(b || '').toLowerCase();
+    a = asciifold(String(a || ''));
+    b = asciifold(String(b || ''));
     if (a > b) return 1;
     if (b > a) return -1;
     return 0;
@@ -425,21 +425,44 @@
   };
 
   var DIACRITICS = {
-    'a': '[aÀÁÂÃÄÅàáâãäå]',
+    'a': '[aÀÁÂÃÄÅàáâãäåĀāąĄ]',
     'c': '[cÇçćĆčČ]',
     'd': '[dđĐďĎ]',
-    'e': '[eÈÉÊËèéêëěĚ]',
-    'i': '[iÌÍÎÏìíîï]',
-    'n': '[nÑñňŇ]',
-    'o': '[oÒÓÔÕÕÖØòóôõöø]',
+    'e': '[eÈÉÊËèéêëěĚĒēęĘ]',
+    'i': '[iÌÍÎÏìíîïĪī]',
+    'l': '[lłŁ]',
+    'n': '[nÑñňŇńŃ]',
+    'o': '[oÒÓÔÕÕÖØòóôõöøŌō]',
     'r': '[rřŘ]',
-    's': '[sŠš]',
+    's': '[sŠšśŚ]',
     't': '[tťŤ]',
-    'u': '[uÙÚÛÜùúûüůŮ]',
+    'u': '[uÙÚÛÜùúûüůŮŪū]',
     'y': '[yŸÿýÝ]',
-    'z': '[zŽž]'
+    'z': '[zŽžżŻźŹ]'
   };
 
+  var asciifold = (function() {
+    var i, n, k, chunk;
+    var foreignletters = '';
+    var lookup = {};
+    for (k in DIACRITICS) {
+      if (DIACRITICS.hasOwnProperty(k)) {
+        chunk = DIACRITICS[k].substring(2, DIACRITICS[k].length - 1);
+        foreignletters += chunk;
+        for (i = 0, n = chunk.length; i < n; i++) {
+          lookup[chunk.charAt(i)] = k;
+        }
+      }
+    }
+    var regexp = new RegExp('[' +  foreignletters + ']', 'g');
+    return function(str) {
+      return str.replace(regexp, function(foreignletter) {
+        return lookup[foreignletter];
+      }).toLowerCase();
+    };
+  })();
+
+
   // export
   // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 
@@ -585,8 +608,8 @@
 }));
 
 /**
- * selectize.js (v0.10.1)
- * Copyright (c) 2013 Brian Reavis & contributors
+ * selectize.js (v0.12.1)
+ * Copyright (c) 2013–2015 Brian Reavis & contributors
  *
  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
  * file except in compliance with the License. You may obtain a copy of the License at:
@@ -707,6 +730,8 @@
   var TAG_SELECT    = 1;
   var TAG_INPUT     = 2;
 
+  // for now, android support in general is too spotty to support validity
+  var SUPPORTS_VALIDITY_API = !/android/i.test(window.navigator.userAgent) && !!document.createElement('form').validity;
 
   var isset = function(object) {
     return typeof object !== 'undefined';
@@ -726,10 +751,10 @@
    *   1         -> '1'
    *
    * @param {string} value
-   * @returns {string}
+   * @returns {string|null}
    */
   var hash_key = function(value) {
-    if (typeof value === 'undefined' || value === null) return '';
+    if (typeof value === 'undefined' || value === null) return null;
     if (typeof value === 'boolean') return value ? '1' : '0';
     return value + '';
   };
@@ -793,25 +818,6 @@
     };
   };
 
-  /**
-   * Builds a hash table out of an array of
-   * objects, using the specified `key` within
-   * each object.
-   *
-   * @param {string} key
-   * @param {mixed} objects
-   */
-  var build_hash_table = function(key, objects) {
-    if (!$.isArray(objects)) return objects;
-    var i, n, table = {};
-    for (i = 0, n = objects.length; i < n; i++) {
-      if (objects[i].hasOwnProperty(key)) {
-        table[objects[i][key]] = objects[i];
-      }
-    }
-    return table;
-  };
-
   /**
    * Wraps `fn` so that it can only be invoked once.
    *
@@ -1053,13 +1059,16 @@
     input.selectize = self;
 
     // detect rtl environment
-    dir = window.getComputedStyle ? window.getComputedStyle(input, null).getPropertyValue('direction') : input.currentStyle && input.currentStyle.direction;
+    var computedStyle = window.getComputedStyle && window.getComputedStyle(input, null);
+    dir = computedStyle ? computedStyle.getPropertyValue('direction') : input.currentStyle && input.currentStyle.direction;
     dir = dir || $input.parents('[dir]:first').attr('dir') || '';
 
     // setup default state
     $.extend(self, {
+      order            : 0,
       settings         : settings,
       $input           : $input,
+      tabIndex         : $input.attr('tabindex') || '',
       tagType          : input.tagName.toLowerCase() === 'select' ? TAG_SELECT : TAG_INPUT,
       rtl              : /rtl/i.test(dir),
 
@@ -1101,12 +1110,20 @@
     self.sifter = new Sifter(this.options, {diacritics: settings.diacritics});
 
     // build options table
-    $.extend(self.options, build_hash_table(settings.valueField, settings.options));
-    delete self.settings.options;
+    if (self.settings.options) {
+      for (i = 0, n = self.settings.options.length; i < n; i++) {
+        self.registerOption(self.settings.options[i]);
+      }
+      delete self.settings.options;
+    }
 
     // build optgroup table
-    $.extend(self.optgroups, build_hash_table(settings.optgroupValueField, settings.optgroups));
-    delete self.settings.optgroups;
+    if (self.settings.optgroups) {
+      for (i = 0, n = self.settings.optgroups.length; i < n; i++) {
+        self.registerOptionGroup(self.settings.optgroups[i]);
+      }
+      delete self.settings.optgroups;
+    }
 
     // option-dependent defaults
     self.settings.mode = self.settings.mode || (self.settings.maxItems === 1 ? 'single' : 'multi');
@@ -1114,16 +1131,6 @@
       self.settings.hideSelected = self.settings.mode === 'multi';
     }
 
-    if (self.settings.create) {
-      self.canCreate = function(input) {
-        var filter = self.settings.createFilter;
-        return input.length
-          && (typeof filter !== 'function' || filter.apply(self, [input]))
-          && (typeof filter !== 'string' || new RegExp(filter).test(input))
-          && (!(filter instanceof RegExp) || filter.test(input));
-      };
-    }
-
     self.initializePlugins(self.settings.plugins);
     self.setupCallbacks();
     self.setupTemplates();
@@ -1161,21 +1168,23 @@
       var inputMode;
       var timeout_blur;
       var timeout_focus;
-      var tab_index;
       var classes;
       var classes_plugins;
 
       inputMode         = self.settings.mode;
-      tab_index         = $input.attr('tabindex') || '';
       classes           = $input.attr('class') || '';
 
       $wrapper          = $('<div>').addClass(settings.wrapperClass).addClass(classes).addClass(inputMode);
       $control          = $('<div>').addClass(settings.inputClass).addClass('items').appendTo($wrapper);
-      $control_input    = $('<input type="text" autocomplete="off" />').appendTo($control).attr('tabindex', tab_index);
+      $control_input    = $('<input type="text" autocomplete="off" />').appendTo($control).attr('tabindex', $input.is(':disabled') ? '-1' : self.tabIndex);
       $dropdown_parent  = $(settings.dropdownParent || $wrapper);
-      $dropdown         = $('<div>').addClass(settings.dropdownClass).addClass(classes).addClass(inputMode).hide().appendTo($dropdown_parent);
+      $dropdown         = $('<div>').addClass(settings.dropdownClass).addClass(inputMode).hide().appendTo($dropdown_parent);
       $dropdown_content = $('<div>').addClass(settings.dropdownContentClass).appendTo($dropdown);
 
+      if(self.settings.copyClassesToDropdown) {
+        $dropdown.addClass(classes);
+      }
+
       $wrapper.css({
         width: $input[0].style.width
       });
@@ -1194,6 +1203,12 @@
         $control_input.attr('placeholder', settings.placeholder);
       }
 
+      // if splitOn was not passed in, construct it from the delimiter to allow pasting universally
+      if (!self.settings.splitOn && self.settings.delimiter) {
+        var delimiterEscaped = self.settings.delimiter.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
+        self.settings.splitOn = new RegExp('\\s*' + delimiterEscaped + '+\\s*');
+      }
+
       if ($input.attr('autocorrect')) {
         $control_input.attr('autocorrect', $input.attr('autocorrect'));
       }
@@ -1209,7 +1224,7 @@
       self.$dropdown_content = $dropdown_content;
 
       $dropdown.on('mouseenter', '[data-selectable]', function() { return self.onOptionHover.apply(self, arguments); });
-      $dropdown.on('mousedown', '[data-selectable]', function() { return self.onOptionSelect.apply(self, arguments); });
+      $dropdown.on('mousedown click', '[data-selectable]', function() { return self.onOptionSelect.apply(self, arguments); });
       watchChildEvent($control, 'mousedown', '*:not(input)', function() { return self.onItemSelect.apply(self, arguments); });
       autoGrow($control_input);
 
@@ -1249,7 +1264,7 @@
           }
           // blur on click outside
           if (!self.$control.has(e.target).length && e.target !== self.$control[0]) {
-            self.blur();
+            self.blur(e.target);
           }
         }
       });
@@ -1278,7 +1293,7 @@
       }
 
       // feature detect for the validation API
-      if ($input[0].validity) {
+      if (SUPPORTS_VALIDITY_API) {
         $input.on('invalid' + eventNS, function(e) {
           e.preventDefault();
           self.isInvalid = true;
@@ -1344,17 +1359,23 @@
      */
     setupCallbacks: function() {
       var key, fn, callbacks = {
-        'initialize'     : 'onInitialize',
-        'change'         : 'onChange',
-        'item_add'       : 'onItemAdd',
-        'item_remove'    : 'onItemRemove',
-        'clear'          : 'onClear',
-        'option_add'     : 'onOptionAdd',
-        'option_remove'  : 'onOptionRemove',
-        'option_clear'   : 'onOptionClear',
-        'dropdown_open'  : 'onDropdownOpen',
-        'dropdown_close' : 'onDropdownClose',
-        'type'           : 'onType'
+        'initialize'      : 'onInitialize',
+        'change'          : 'onChange',
+        'item_add'        : 'onItemAdd',
+        'item_remove'     : 'onItemRemove',
+        'clear'           : 'onClear',
+        'option_add'      : 'onOptionAdd',
+        'option_remove'   : 'onOptionRemove',
+        'option_clear'    : 'onOptionClear',
+        'optgroup_add'    : 'onOptionGroupAdd',
+        'optgroup_remove' : 'onOptionGroupRemove',
+        'optgroup_clear'  : 'onOptionGroupClear',
+        'dropdown_open'   : 'onDropdownOpen',
+        'dropdown_close'  : 'onDropdownClose',
+        'type'            : 'onType',
+        'load'            : 'onLoad',
+        'focus'           : 'onFocus',
+        'blur'            : 'onBlur'
       };
 
       for (key in callbacks) {
@@ -1427,7 +1448,6 @@
       this.$input.trigger('change');
     },
 
-
     /**
      * Triggered on <input> paste.
      *
@@ -1438,6 +1458,17 @@
       var self = this;
       if (self.isFull() || self.isInputHidden || self.isLocked) {
         e.preventDefault();
+      } else {
+        // If a regex or string is included, this will split the pasted
+        // input and create Items for each separate value
+        if (self.settings.splitOn) {
+          setTimeout(function() {
+            var splitInput = $.trim(self.$control_input.val() || '').split(self.settings.splitOn);
+            for (var i = 0, n = splitInput.length; i < n; i++) {
+              self.createItem(splitInput[i]);
+            }
+          }, 0);
+        }
       }
     },
 
@@ -1450,7 +1481,7 @@
     onKeyPress: function(e) {
       if (this.isLocked) return e && e.preventDefault();
       var character = String.fromCharCode(e.keyCode || e.which);
-      if (this.settings.create && character === this.settings.delimiter) {
+      if (this.settings.create && this.settings.mode === 'multi' && character === this.settings.delimiter) {
         this.createItem();
         e.preventDefault();
         return false;
@@ -1482,7 +1513,11 @@
           }
           break;
         case KEY_ESC:
-          self.close();
+          if (self.isOpen) {
+            e.preventDefault();
+            e.stopPropagation();
+            self.close();
+          }
           return;
         case KEY_N:
           if (!e.ctrlKey || e.altKey) break;
@@ -1509,8 +1544,8 @@
         case KEY_RETURN:
           if (self.isOpen && self.$activeOption) {
             self.onOptionSelect({currentTarget: self.$activeOption});
+            e.preventDefault();
           }
-          e.preventDefault();
           return;
         case KEY_LEFT:
           self.advanceSelection(-1, e);
@@ -1521,7 +1556,12 @@
         case KEY_TAB:
           if (self.settings.selectOnTab && self.isOpen && self.$activeOption) {
             self.onOptionSelect({currentTarget: self.$activeOption});
-            e.preventDefault();
+
+            // Default behaviour is to jump to the next field, we only want this
+            // if the current field doesn't accept any more entries
+            if (!self.isFull()) {
+              e.preventDefault();
+            }
           }
           if (self.settings.create && self.createItem()) {
             e.preventDefault();
@@ -1585,8 +1625,8 @@
      */
     onFocus: function(e) {
       var self = this;
+      var wasFocused = self.isFocused;
 
-      self.isFocused = true;
       if (self.isDisabled) {
         self.blur();
         e && e.preventDefault();
@@ -1594,8 +1634,11 @@
       }
 
       if (self.ignoreFocus) return;
+      self.isFocused = true;
       if (self.settings.preload === 'focus') self.onSearchChange('');
 
+      if (!wasFocused) self.trigger('focus');
+
       if (!self.$activeItems.length) {
         self.showInput();
         self.setActiveItem(null);
@@ -1609,31 +1652,43 @@
      * Triggered on <input> blur.
      *
      * @param {object} e
-     * @returns {boolean}
+     * @param {Element} dest
      */
-    onBlur: function(e) {
+    onBlur: function(e, dest) {
       var self = this;
+      if (!self.isFocused) return;
       self.isFocused = false;
-      if (self.ignoreFocus) return;
 
-      // necessary to prevent IE closing the dropdown when the scrollbar is clicked
-      if (!self.ignoreBlur && document.activeElement === self.$dropdown_content[0]) {
+      if (self.ignoreFocus) {
+        return;
+      } else if (!self.ignoreBlur && document.activeElement === self.$dropdown_content[0]) {
+        // necessary to prevent IE closing the dropdown when the scrollbar is clicked
         self.ignoreBlur = true;
         self.onFocus(e);
-
         return;
       }
 
+      var deactivate = function() {
+        self.close();
+        self.setTextboxValue('');
+        self.setActiveItem(null);
+        self.setActiveOption(null);
+        self.setCaret(self.items.length);
+        self.refreshState();
+
+        // IE11 bug: element still marked as active
+        (dest || document.body).focus();
+
+        self.ignoreFocus = false;
+        self.trigger('blur');
+      };
+
+      self.ignoreFocus = true;
       if (self.settings.create && self.settings.createOnBlur) {
-        self.createItem(false);
+        self.createItem(null, false, deactivate);
+      } else {
+        deactivate();
       }
-
-      self.close();
-      self.setTextboxValue('');
-      self.setActiveItem(null);
-      self.setActiveOption(null);
-      self.setCaret(self.items.length);
-      self.refreshState();
     },
 
     /**
@@ -1665,14 +1720,20 @@
 
       $target = $(e.currentTarget);
       if ($target.hasClass('create')) {
-        self.createItem();
+        self.createItem(null, function() {
+          if (self.settings.closeAfterSelect) {
+            self.close();
+          }
+        });
       } else {
         value = $target.attr('data-value');
-        if (value) {
+        if (typeof value !== 'undefined') {
           self.lastQuery = null;
           self.setTextboxValue('');
           self.addItem(value);
-          if (!self.settings.hideSelected && e.type && /mouse/.test(e.type)) {
+          if (self.settings.closeAfterSelect) {
+            self.close();
+          } else if (!self.settings.hideSelected && e.type && /mouse/.test(e.type)) {
             self.setActiveOption(self.getOption(value));
           }
         }
@@ -1705,7 +1766,7 @@
      */
     load: function(fn) {
       var self = this;
-      var $wrapper = self.$wrapper.addClass('loading');
+      var $wrapper = self.$wrapper.addClass(self.settings.loadingClass);
 
       self.loading++;
       fn.apply(self, [function(results) {
@@ -1715,7 +1776,7 @@
           self.refreshOptions(self.isFocused && !self.isInputHidden);
         }
         if (!self.loading) {
-          $wrapper.removeClass('loading');
+          $wrapper.removeClass(self.settings.loadingClass);
         }
         self.trigger('load', results);
       }]);
@@ -1756,10 +1817,12 @@
      *
      * @param {mixed} value
      */
-    setValue: function(value) {
-      debounce_events(this, ['change'], function() {
-        this.clear();
-        this.addItems(value);
+    setValue: function(value, silent) {
+      var events = silent ? [] : ['change'];
+
+      debounce_events(this, events, function() {
+        this.clear(silent);
+        this.addItems(value, silent);
       });
     },
 
@@ -1903,11 +1966,7 @@
     },
 
     /**
-     * Gives the control focus. If "trigger" is falsy,
-     * focus handlers won't be fired--causing the focus
-     * to happen silently in the background.
-     *
-     * @param {boolean} trigger
+     * Gives the control focus.
      */
     focus: function() {
       var self = this;
@@ -1923,9 +1982,12 @@
 
     /**
      * Forces the control out of focus.
+     *
+     * @param {Element} dest
      */
-    blur: function() {
-      this.$control_input.trigger('blur');
+    blur: function(dest) {
+      this.$control_input[0].blur();
+      this.onBlur(null, dest);
     },
 
     /**
@@ -1952,7 +2014,7 @@
       var settings = this.settings;
       var sort = settings.sortField;
       if (typeof sort === 'string') {
-        sort = {field: sort};
+        sort = [{field: sort}];
       }
 
       return {
@@ -2026,7 +2088,7 @@
       }
 
       var self              = this;
-      var query             = self.$control_input.val();
+      var query             = $.trim(self.$control_input.val());
       var results           = self.search(query);
       var $dropdown_content = self.$dropdown_content;
       var active_before     = self.$activeOption && hash_key(self.$activeOption.attr('data-value'));
@@ -2039,15 +2101,7 @@
 
       // render and group available options individually
       groups = {};
-
-      if (self.settings.optgroupOrder) {
-        groups_order = self.settings.optgroupOrder;
-        for (i = 0; i < groups_order.length; i++) {
-          groups[groups_order[i]] = [];
-        }
-      } else {
-        groups_order = [];
-      }
+      groups_order = [];
 
       for (i = 0; i < n; i++) {
         option      = self.options[results.items[i].id];
@@ -2068,6 +2122,15 @@
         }
       }
 
+      // sort optgroups
+      if (this.settings.lockOptgroupOrder) {
+        groups_order.sort(function(a, b) {
+          var a_order = self.optgroups[a].$order || 0;
+          var b_order = self.optgroups[b].$order || 0;
+          return a_order - b_order;
+        });
+      }
+
       // render optgroup headers & join groups
       html = [];
       for (i = 0, n = groups_order.length; i < n; i++) {
@@ -2102,7 +2165,7 @@
       }
 
       // add create option
-      has_create_option = self.settings.create && self.canCreate(results.query);
+      has_create_option = self.canCreate(query);
       if (has_create_option) {
         $dropdown_content.prepend(self.render('option_create', {input: query}));
         $create = $($dropdown_content[0].childNodes[0]);
@@ -2146,10 +2209,10 @@
      *
      *   this.addOption(data)
      *
-     * @param {object} data
+     * @param {object|array} data
      */
     addOption: function(data) {
-      var i, n, optgroup, value, self = this;
+      var i, n, value, self = this;
 
       if ($.isArray(data)) {
         for (i = 0, n = data.length; i < n; i++) {
@@ -2158,13 +2221,40 @@
         return;
       }
 
-      value = hash_key(data[self.settings.valueField]);
-      if (!value || self.options.hasOwnProperty(value)) return;
+      if (value = self.registerOption(data)) {
+        self.userOptions[value] = true;
+        self.lastQuery = null;
+        self.trigger('option_add', value, data);
+      }
+    },
+
+    /**
+     * Registers an option to the pool of options.
+     *
+     * @param {object} data
+     * @return {boolean|string}
+     */
+    registerOption: function(data) {
+      var key = hash_key(data[this.settings.valueField]);
+      if ((!key || this.options.hasOwnProperty(key)) && !this.settings.allowEmptyOption) return false;
+      data.$order = data.$order || ++this.order;
+      this.options[key] = data;
+      return key;
+    },
 
-      self.userOptions[value] = true;
-      self.options[value] = data;
-      self.lastQuery = null;
-      self.trigger('option_add', value, data);
+    /**
+     * Registers an option group to the pool of option groups.
+     *
+     * @param {object} data
+     * @return {boolean|string}
+     */
+    registerOptionGroup: function(data) {
+      var key = hash_key(data[this.settings.optgroupValueField]);
+      if (!key) return false;
+
+      data.$order = data.$order || ++this.order;
+      this.optgroups[key] = data;
+      return key;
     },
 
     /**
@@ -2175,8 +2265,32 @@
      * @param {object} data
      */
     addOptionGroup: function(id, data) {
-      this.optgroups[id] = data;
-      this.trigger('optgroup_add', id, data);
+      data[this.settings.optgroupValueField] = id;
+      if (id = this.registerOptionGroup(data)) {
+        this.trigger('optgroup_add', id, data);
+      }
+    },
+
+    /**
+     * Removes an existing option group.
+     *
+     * @param {string} id
+     */
+    removeOptionGroup: function(id) {
+      if (this.optgroups.hasOwnProperty(id)) {
+        delete this.optgroups[id];
+        this.renderCache = {};
+        this.trigger('optgroup_remove', id);
+      }
+    },
+
+    /**
+     * Clears all existing option groups.
+     */
+    clearOptionGroups: function() {
+      this.optgroups = {};
+      this.renderCache = {};
+      this.trigger('optgroup_clear');
     },
 
     /**
@@ -2190,14 +2304,17 @@
     updateOption: function(value, data) {
       var self = this;
       var $item, $item_new;
-      var value_new, index_item, cache_items, cache_options;
+      var value_new, index_item, cache_items, cache_options, order_old;
 
       value     = hash_key(value);
       value_new = hash_key(data[self.settings.valueField]);
 
       // sanity checks
+      if (value === null) return;
       if (!self.options.hasOwnProperty(value)) return;
-      if (!value_new) throw new Error('Value must be set in option data');
+      if (typeof value_new !== 'string') throw new Error('Value must be set in option data');
+
+      order_old = self.options[value].$order;
 
       // update references
       if (value_new !== value) {
@@ -2207,6 +2324,7 @@
           self.items.splice(index_item, 1, value_new);
         }
       }
+      data.$order = data.$order || order_old;
       self.options[value_new] = data;
 
       // invalidate render cache
@@ -2230,6 +2348,9 @@
         $item.replaceWith($item_new);
       }
 
+      // invalidate last query because we might have updated the sortField
+      self.lastQuery = null;
+
       // update dropdown contents
       if (self.isOpen) {
         self.refreshOptions(false);
@@ -2240,8 +2361,9 @@
      * Removes a single option.
      *
      * @param {string} value
+     * @param {boolean} silent
      */
-    removeOption: function(value) {
+    removeOption: function(value, silent) {
       var self = this;
       value = hash_key(value);
 
@@ -2254,7 +2376,7 @@
       delete self.options[value];
       self.lastQuery = null;
       self.trigger('option_remove', value);
-      self.removeItem(value);
+      self.removeItem(value, silent);
     },
 
     /**
@@ -2309,7 +2431,7 @@
     getElementWithValue: function(value, $els) {
       value = hash_key(value);
 
-      if (value) {
+      if (typeof value !== 'undefined' && value !== null) {
         for (var i = 0, n = $els.length; i < n; i++) {
           if ($els[i].getAttribute('data-value') === value) {
             return $($els[i]);
@@ -2336,12 +2458,13 @@
      * at the current caret position.
      *
      * @param {string} value
+     * @param {boolean} silent
      */
-    addItems: function(values) {
+    addItems: function(values, silent) {
       var items = $.isArray(values) ? values : [values];
       for (var i = 0, n = items.length; i < n; i++) {
         this.isPending = (i < n - 1);
-        this.addItem(items[i]);
+        this.addItem(items[i], silent);
       }
     },
 
@@ -2350,9 +2473,12 @@
      * at the current caret position.
      *
      * @param {string} value
+     * @param {boolean} silent
      */
-    addItem: function(value) {
-      debounce_events(this, ['change'], function() {
+    addItem: function(value, silent) {
+      var events = silent ? [] : ['change'];
+
+      debounce_events(this, events, function() {
         var $item, $option, $options;
         var self = this;
         var inputMode = self.settings.mode;
@@ -2365,7 +2491,7 @@
         }
 
         if (!self.options.hasOwnProperty(value)) return;
-        if (inputMode === 'single') self.clear();
+        if (inputMode === 'single') self.clear(silent);
         if (inputMode === 'multi' && self.isFull()) return;
 
         $item = $(self.render('item', self.options[value]));
@@ -2398,7 +2524,7 @@
 
           self.updatePlaceholder();
           self.trigger('item_add', value, $item);
-          self.updateOriginalInput();
+          self.updateOriginalInput({silent: silent});
         }
       });
     },
@@ -2409,7 +2535,7 @@
      *
      * @param {string} value
      */
-    removeItem: function(value) {
+    removeItem: function(value, silent) {
       var self = this;
       var $item, i, idx;
 
@@ -2427,7 +2553,7 @@
         self.items.splice(i, 1);
         self.lastQuery = null;
         if (!self.settings.persist && self.userOptions.hasOwnProperty(value)) {
-          self.removeOption(value);
+          self.removeOption(value, silent);
         }
 
         if (i < self.caretPos) {
@@ -2436,9 +2562,9 @@
 
         self.refreshState();
         self.updatePlaceholder();
-        self.updateOriginalInput();
+        self.updateOriginalInput({silent: silent});
         self.positionDropdown();
-        self.trigger('item_remove', value);
+        self.trigger('item_remove', value, $item);
       }
     },
 
@@ -2450,19 +2576,30 @@
      * Once this completes, it will be added
      * to the item list.
      *
+     * @param {string} value
+     * @param {boolean} [triggerDropdown]
+     * @param {function} [callback]
      * @return {boolean}
      */
-    createItem: function(triggerDropdown) {
+    createItem: function(input, triggerDropdown) {
       var self  = this;
-      var input = $.trim(self.$control_input.val() || '');
       var caret = self.caretPos;
-      if (!self.canCreate(input)) return false;
-      self.lock();
+      input = input || $.trim(self.$control_input.val() || '');
 
-      if (typeof triggerDropdown === 'undefined') {
+      var callback = arguments[arguments.length - 1];
+      if (typeof callback !== 'function') callback = function() {};
+
+      if (typeof triggerDropdown !== 'boolean') {
         triggerDropdown = true;
       }
 
+      if (!self.canCreate(input)) {
+        callback();
+        return false;
+      }
+
+      self.lock();
+
       var setup = (typeof self.settings.create === 'function') ? this.settings.create : function(input) {
         var data = {};
         data[self.settings.labelField] = input;
@@ -2473,15 +2610,16 @@
       var create = once(function(data) {
         self.unlock();
 
-        if (!data || typeof data !== 'object') return;
+        if (!data || typeof data !== 'object') return callback();
         var value = hash_key(data[self.settings.valueField]);
-        if (!value) return;
+        if (typeof value !== 'string') return callback();
 
         self.setTextboxValue('');
         self.addOption(data);
         self.setCaret(caret);
         self.addItem(value);
         self.refreshOptions(triggerDropdown && self.settings.mode !== 'single');
+        callback(data);
       });
 
       var output = setup.apply(this, [input, create]);
@@ -2499,9 +2637,7 @@
       this.lastQuery = null;
 
       if (this.isSetup) {
-        for (var i = 0; i < this.items.length; i++) {
-          this.addItem(this.items);
-        }
+        this.addItem(this.items);
       }
 
       this.refreshState();
@@ -2561,13 +2697,15 @@
      * Refreshes the original <select> or <input>
      * element to reflect the current state.
      */
-    updateOriginalInput: function() {
-      var i, n, options, self = this;
+    updateOriginalInput: function(opts) {
+      var i, n, options, label, self = this;
+      opts = opts || {};
 
       if (self.tagType === TAG_SELECT) {
         options = [];
         for (i = 0, n = self.items.length; i < n; i++) {
-          options.push('<option value="' + escape_html(self.items[i]) + '" selected="selected"></option>');
+          label = self.options[self.items[i]][self.settings.labelField] || '';
+          options.push('<option value="' + escape_html(self.items[i]) + '" selected="selected">' + escape_html(label) + '</option>');
         }
         if (!options.length && !this.$input.attr('multiple')) {
           options.push('<option value="" selected="selected"></option>');
@@ -2579,7 +2717,9 @@
       }
 
       if (self.isSetup) {
-        self.trigger('change', self.$input.val());
+        if (!opts.silent) {
+          self.trigger('change', self.$input.val());
+        }
       }
     },
 
@@ -2654,8 +2794,10 @@
     /**
      * Resets / clears all selected items
      * from the control.
+     *
+     * @param {boolean} silent
      */
-    clear: function() {
+    clear: function(silent) {
       var self = this;
 
       if (!self.items.length) return;
@@ -2665,7 +2807,7 @@
       self.setCaret(0);
       self.setActiveItem(null);
       self.updatePlaceholder();
-      self.updateOriginalInput();
+      self.updateOriginalInput({silent: silent});
       self.refreshState();
       self.showInput();
       self.trigger('clear');
@@ -2876,6 +3018,7 @@
     disable: function() {
       var self = this;
       self.$input.prop('disabled', true);
+      self.$control_input.prop('disabled', true).prop('tabindex', -1);
       self.isDisabled = true;
       self.lock();
     },
@@ -2887,6 +3030,7 @@
     enable: function() {
       var self = this;
       self.$input.prop('disabled', false);
+      self.$control_input.prop('disabled', false).prop('tabindex', self.tabIndex);
       self.isDisabled = false;
       self.unlock();
     },
@@ -2937,7 +3081,7 @@
       var html = '';
       var cache = false;
       var self = this;
-      var regex_tag = /^[\t ]*<([a-z][a-z0-9\-_]*(?:\:[a-z][a-z0-9\-_]*)?)/i;
+      var regex_tag = /^[\t \r\n]*<([a-z][a-z0-9\-_]*(?:\:[a-z][a-z0-9\-_]*)?)/i;
 
       if (templateName === 'option' || templateName === 'item') {
         value = hash_key(data[self.settings.valueField]);
@@ -2991,16 +3135,36 @@
       } else {
         delete self.renderCache[templateName];
       }
-    }
+    },
 
+    /**
+     * Determines whether or not to display the
+     * create item prompt, given a user input.
+     *
+     * @param {string} input
+     * @return {boolean}
+     */
+    canCreate: function(input) {
+      var self = this;
+      if (!self.settings.create) return false;
+      var filter = self.settings.createFilter;
+      return input.length
+        && (typeof filter !== 'function' || filter.apply(self, [input]))
+        && (typeof filter !== 'string' || new RegExp(filter).test(input))
+        && (!(filter instanceof RegExp) || filter.test(input));
+    }
 
   });
 
 
   Selectize.count = 0;
   Selectize.defaults = {
+    options: [],
+    optgroups: [],
+
     plugins: [],
     delimiter: ',',
+    splitOn: null, // regexp or string for splitting up values from a paste command
     persist: true,
     diacritics: true,
     create: false,
@@ -3014,9 +3178,12 @@
     addPrecedence: false,
     selectOnTab: false,
     preload: false,
+    allowEmptyOption: false,
+    closeAfterSelect: false,
 
     scrollDuration: 60,
     loadThrottle: 300,
+    loadingClass: 'loading',
 
     dataAttr: 'data-data',
     optgroupField: 'optgroup',
@@ -3024,7 +3191,7 @@
     labelField: 'text',
     optgroupLabelField: 'label',
     optgroupValueField: 'value',
-    optgroupOrder: null,
+    lockOptgroupOrder: false,
 
     sortField: '$order',
     searchField: ['text'],
@@ -3038,21 +3205,26 @@
 
     dropdownParent: null,
 
+    copyClassesToDropdown: true,
+
     /*
-    load            : null, // function(query, callback) { ... }
-    score           : null, // function(search) { ... }
-    onInitialize    : null, // function() { ... }
-    onChange        : null, // function(value) { ... }
-    onItemAdd       : null, // function(value, $item) { ... }
-    onItemRemove    : null, // function(value) { ... }
-    onClear         : null, // function() { ... }
-    onOptionAdd     : null, // function(value, data) { ... }
-    onOptionRemove  : null, // function(value) { ... }
-    onOptionClear   : null, // function() { ... }
-    onDropdownOpen  : null, // function($dropdown) { ... }
-    onDropdownClose : null, // function($dropdown) { ... }
-    onType          : null, // function(str) { ... }
-    onDelete        : null, // function(values) { ... }
+    load                 : null, // function(query, callback) { ... }
+    score                : null, // function(search) { ... }
+    onInitialize         : null, // function() { ... }
+    onChange             : null, // function(value) { ... }
+    onItemAdd            : null, // function(value, $item) { ... }
+    onItemRemove         : null, // function(value) { ... }
+    onClear              : null, // function() { ... }
+    onOptionAdd          : null, // function(value, data) { ... }
+    onOptionRemove       : null, // function(value) { ... }
+    onOptionClear        : null, // function() { ... }
+    onOptionGroupAdd     : null, // function(id, data) { ... }
+    onOptionGroupRemove  : null, // function(id) { ... }
+    onOptionGroupClear   : null, // function() { ... }
+    onDropdownOpen       : null, // function($dropdown) { ... }
+    onDropdownClose      : null, // function($dropdown) { ... }
+    onType               : null, // function(str) { ... }
+    onDelete             : null, // function(values) { ... }
     */
 
     render: {
@@ -3066,6 +3238,7 @@
     }
   };
 
+
   $.fn.selectize = function(settings_user) {
     var defaults             = $.fn.selectize.defaults;
     var settings             = $.extend({}, defaults, settings_user);
@@ -3083,19 +3256,27 @@
      * @param {object} settings_element
      */
     var init_textbox = function($input, settings_element) {
-      var i, n, values, option, value = $.trim($input.val() || '');
-      if (!value.length) return;
+      var i, n, values, option;
 
-      values = value.split(settings.delimiter);
-      for (i = 0, n = values.length; i < n; i++) {
-        option = {};
-        option[field_label] = values[i];
-        option[field_value] = values[i];
+      var data_raw = $input.attr(attr_data);
 
-        settings_element.options[values[i]] = option;
+      if (!data_raw) {
+        var value = $.trim($input.val() || '');
+        if (!settings.allowEmptyOption && !value.length) return;
+        values = value.split(settings.delimiter);
+        for (i = 0, n = values.length; i < n; i++) {
+          option = {};
+          option[field_label] = values[i];
+          option[field_value] = values[i];
+          settings_element.options.push(option);
+        }
+        settings_element.items = values;
+      } else {
+        settings_element.options = JSON.parse(data_raw);
+        for (i = 0, n = settings_element.options.length; i < n; i++) {
+          settings_element.items.push(settings_element.options[i][field_value]);
+        }
       }
-
-      settings_element.items = values;
     };
 
     /**
@@ -3107,6 +3288,7 @@
     var init_select = function($input, settings_element) {
       var i, n, tagName, $children, order = 0;
       var options = settings_element.options;
+      var optionsMap = {};
 
       var readData = function($el) {
         var data = attr_data && $el.attr(attr_data);
@@ -3117,37 +3299,36 @@
       };
 
       var addOption = function($option, group) {
-        var value, option;
-
         $option = $($option);
 
-        value = $option.attr('value') || '';
-        if (!value.length) return;
+        var value = hash_key($option.attr('value'));
+        if (!value && !settings.allowEmptyOption) return;
 
         // if the option already exists, it's probably been
         // duplicated in another optgroup. in this case, push
         // the current group to the "optgroup" property on the
         // existing option so that it's rendered in both places.
-        if (options.hasOwnProperty(value)) {
+        if (optionsMap.hasOwnProperty(value)) {
           if (group) {
-            if (!options[value].optgroup) {
-              options[value].optgroup = group;
-            } else if (!$.isArray(options[value].optgroup)) {
-              options[value].optgroup = [options[value].optgroup, group];
+            var arr = optionsMap[value][field_optgroup];
+            if (!arr) {
+              optionsMap[value][field_optgroup] = group;
+            } else if (!$.isArray(arr)) {
+              optionsMap[value][field_optgroup] = [arr, group];
             } else {
-              options[value].optgroup.push(group);
+              arr.push(group);
             }
           }
           return;
         }
 
-        option                 = readData($option) || {};
+        var option             = readData($option) || {};
         option[field_label]    = option[field_label] || $option.text();
         option[field_value]    = option[field_value] || value;
         option[field_optgroup] = option[field_optgroup] || group;
 
-        option.$order = ++order;
-        options[value] = option;
+        optionsMap[value] = option;
+        options.push(option);
 
         if ($option.is(':selected')) {
           settings_element.items.push(value);
@@ -3164,7 +3345,7 @@
           optgroup = readData($optgroup) || {};
           optgroup[field_optgroup_label] = id;
           optgroup[field_optgroup_value] = id;
-          settings_element.optgroups[id] = optgroup;
+          settings_element.optgroups.push(optgroup);
         }
 
         $options = $('option', $optgroup);
@@ -3192,10 +3373,15 @@
       var instance;
       var $input = $(this);
       var tag_name = this.tagName.toLowerCase();
+      var placeholder = $input.attr('placeholder') || $input.attr('data-placeholder');
+      if (!placeholder && !settings.allowEmptyOption) {
+        placeholder = $input.children('option[value=""]').text();
+      }
+
       var settings_element = {
-        'placeholder' : $input.children('option[value=""]').text() || $input.attr('placeholder'),
-        'options'     : {},
-        'optgroups'   : {},
+        'placeholder' : placeholder,
+        'options'     : [],
+        'optgroups'   : [],
         'items'       : []
       };
 
@@ -3210,6 +3396,9 @@
   };
 
   $.fn.selectize.defaults = Selectize.defaults;
+  $.fn.selectize.support = {
+    validity: SUPPORTS_VALIDITY_API
+  };
 
 
   Selectize.define('drag_drop', function(options) {
@@ -3452,7 +3641,7 @@
       return option[this.settings.labelField];
     };
 
-    this.onKeyDown = (function(e) {
+    this.onKeyDown = (function() {
       var original = self.onKeyDown;
       return function(e) {
         var index, option;
@@ -3473,5 +3662,6 @@
     })();
   });
 
+
   return Selectize;
 }));