Generate more consistent ids

A global id is generated for the container, and each further id
builds off of the global id.

dist/js/select2.amd.full.js

@@ -134,6 +134,17 @@ define('select2/utils',[], function () {
 
   Utils.Observable = Observable;
 
+  Utils.generateChars = function (length) {
+    var chars = '';
+
+    for (var i = 0; i < length; i++) {
+      var randomChar = Math.floor(Math.random() * 36);
+      chars += randomChar.toString(36);
+    }
+
+    return chars;
+  };
+
   return Utils;
 });
 
@@ -515,16 +526,6 @@ define('select2/selection/single',[
 
     $selection.attr('title', this.$element.attr('title'));
 
-    var id = 'select2-container-';
-
-    for (var i = 0; i < 4; i++) {
-      var r = Math.floor(Math.random() * 16);
-      id += r.toString(16);
-    }
-
-    $selection.find('.rendered-selection').attr('id', id);
-    $selection.attr('aria-labelledby', id);
-
     this.$selection = $selection;
 
     return $selection;
@@ -535,6 +536,11 @@ define('select2/selection/single',[
 
     SingleSelection.__super__.bind.apply(this, arguments);
 
+    var id = container.id + '-container';
+
+    this.$selection.find('.rendered-selection').attr('id', id);
+    this.$selection.attr('aria-labelledby', id);
+
     this.$selection.on('mousedown', function (evt) {
       // Only respond to left clicks
       if (evt.which !== 1) {
@@ -781,21 +787,15 @@ define('select2/data/base',[
     // Can be implemented in subclasses
   };
 
-  BaseAdapter.prototype.generateResultId = function (data) {
+  BaseAdapter.prototype.generateResultId = function (container, data) {
-    var id = 'select2-result-';
+    var id = container.id + '-result-';
 
-    for (var i = 0; i < 4; i++) {
+    id += Utils.generateChars(4);
-      var r = Math.floor(Math.random() * 16);
-      id += r.toString(16);
-    }
 
     if (data.id != null) {
       id += '-' + data.id.toString();
     } else {
-      for (var s = 0; s < 4; s++) {
+      id += '-' + Utils.generateChars(4);
-        var idChar = Math.floor(Math.random() * 16);
-        id += idChar.toString(16);
-      }
     }
     return id;
   };
@@ -886,6 +886,8 @@ define('select2/data/select',[
   SelectAdapter.prototype.bind = function (container, $container) {
     var self = this;
 
+    this.container = container;
+
     container.on('select', function (params) {
       self.select(params.data);
     });
@@ -952,7 +954,7 @@ define('select2/data/select',[
       }
 
       if (data.id) {
-        data._resultId = this.generateResultId(data);
+        data._resultId = this.generateResultId(this.container, data);
       }
 
       $option.data('data', data);
@@ -1292,6 +1294,16 @@ define('select2/core',[
   var Select2 = function ($element, options) {
     this.$element = $element;
 
+    if ($element.attr('id') != null) {
+      this.id = $element.attr('id');
+    } else if ($element.attr('name') != null) {
+      this.id = $element.attr('name') + '-' + Utils.generateChars(2);
+    } else {
+      this.id = Utils.generateChars(4);
+    }
+
+    this.id = 'select2-' + this.id;
+
     options = options || {};
 
     options.multiple = options.multiple || $element.prop('multiple');

dist/js/select2.amd.js

@@ -134,6 +134,17 @@ define('select2/utils',[], function () {
 
   Utils.Observable = Observable;
 
+  Utils.generateChars = function (length) {
+    var chars = '';
+
+    for (var i = 0; i < length; i++) {
+      var randomChar = Math.floor(Math.random() * 36);
+      chars += randomChar.toString(36);
+    }
+
+    return chars;
+  };
+
   return Utils;
 });
 
@@ -515,16 +526,6 @@ define('select2/selection/single',[
 
     $selection.attr('title', this.$element.attr('title'));
 
-    var id = 'select2-container-';
-
-    for (var i = 0; i < 4; i++) {
-      var r = Math.floor(Math.random() * 16);
-      id += r.toString(16);
-    }
-
-    $selection.find('.rendered-selection').attr('id', id);
-    $selection.attr('aria-labelledby', id);
-
     this.$selection = $selection;
 
     return $selection;
@@ -535,6 +536,11 @@ define('select2/selection/single',[
 
     SingleSelection.__super__.bind.apply(this, arguments);
 
+    var id = container.id + '-container';
+
+    this.$selection.find('.rendered-selection').attr('id', id);
+    this.$selection.attr('aria-labelledby', id);
+
     this.$selection.on('mousedown', function (evt) {
       // Only respond to left clicks
       if (evt.which !== 1) {
@@ -781,21 +787,15 @@ define('select2/data/base',[
     // Can be implemented in subclasses
   };
 
-  BaseAdapter.prototype.generateResultId = function (data) {
+  BaseAdapter.prototype.generateResultId = function (container, data) {
-    var id = 'select2-result-';
+    var id = container.id + '-result-';
 
-    for (var i = 0; i < 4; i++) {
+    id += Utils.generateChars(4);
-      var r = Math.floor(Math.random() * 16);
-      id += r.toString(16);
-    }
 
     if (data.id != null) {
       id += '-' + data.id.toString();
     } else {
-      for (var s = 0; s < 4; s++) {
+      id += '-' + Utils.generateChars(4);
-        var idChar = Math.floor(Math.random() * 16);
-        id += idChar.toString(16);
-      }
     }
     return id;
   };
@@ -886,6 +886,8 @@ define('select2/data/select',[
   SelectAdapter.prototype.bind = function (container, $container) {
     var self = this;
 
+    this.container = container;
+
     container.on('select', function (params) {
       self.select(params.data);
     });
@@ -952,7 +954,7 @@ define('select2/data/select',[
       }
 
       if (data.id) {
-        data._resultId = this.generateResultId(data);
+        data._resultId = this.generateResultId(this.container, data);
       }
 
       $option.data('data', data);
@@ -1292,6 +1294,16 @@ define('select2/core',[
   var Select2 = function ($element, options) {
     this.$element = $element;
 
+    if ($element.attr('id') != null) {
+      this.id = $element.attr('id');
+    } else if ($element.attr('name') != null) {
+      this.id = $element.attr('name') + '-' + Utils.generateChars(2);
+    } else {
+      this.id = Utils.generateChars(4);
+    }
+
+    this.id = 'select2-' + this.id;
+
     options = options || {};
 
     options.multiple = options.multiple || $element.prop('multiple');

dist/js/select2.full.js

@@ -9672,6 +9672,17 @@ define('select2/utils',[], function () {
 
   Utils.Observable = Observable;
 
+  Utils.generateChars = function (length) {
+    var chars = '';
+
+    for (var i = 0; i < length; i++) {
+      var randomChar = Math.floor(Math.random() * 36);
+      chars += randomChar.toString(36);
+    }
+
+    return chars;
+  };
+
   return Utils;
 });
 
@@ -10053,16 +10064,6 @@ define('select2/selection/single',[
 
     $selection.attr('title', this.$element.attr('title'));
 
-    var id = 'select2-container-';
-
-    for (var i = 0; i < 4; i++) {
-      var r = Math.floor(Math.random() * 16);
-      id += r.toString(16);
-    }
-
-    $selection.find('.rendered-selection').attr('id', id);
-    $selection.attr('aria-labelledby', id);
-
     this.$selection = $selection;
 
     return $selection;
@@ -10073,6 +10074,11 @@ define('select2/selection/single',[
 
     SingleSelection.__super__.bind.apply(this, arguments);
 
+    var id = container.id + '-container';
+
+    this.$selection.find('.rendered-selection').attr('id', id);
+    this.$selection.attr('aria-labelledby', id);
+
     this.$selection.on('mousedown', function (evt) {
       // Only respond to left clicks
       if (evt.which !== 1) {
@@ -10319,21 +10325,15 @@ define('select2/data/base',[
     // Can be implemented in subclasses
   };
 
-  BaseAdapter.prototype.generateResultId = function (data) {
+  BaseAdapter.prototype.generateResultId = function (container, data) {
-    var id = 'select2-result-';
+    var id = container.id + '-result-';
 
-    for (var i = 0; i < 4; i++) {
+    id += Utils.generateChars(4);
-      var r = Math.floor(Math.random() * 16);
-      id += r.toString(16);
-    }
 
     if (data.id != null) {
       id += '-' + data.id.toString();
     } else {
-      for (var s = 0; s < 4; s++) {
+      id += '-' + Utils.generateChars(4);
-        var idChar = Math.floor(Math.random() * 16);
-        id += idChar.toString(16);
-      }
     }
     return id;
   };
@@ -10424,6 +10424,8 @@ define('select2/data/select',[
   SelectAdapter.prototype.bind = function (container, $container) {
     var self = this;
 
+    this.container = container;
+
     container.on('select', function (params) {
       self.select(params.data);
     });
@@ -10490,7 +10492,7 @@ define('select2/data/select',[
       }
 
       if (data.id) {
-        data._resultId = this.generateResultId(data);
+        data._resultId = this.generateResultId(this.container, data);
       }
 
       $option.data('data', data);
@@ -10830,6 +10832,16 @@ define('select2/core',[
   var Select2 = function ($element, options) {
     this.$element = $element;
 
+    if ($element.attr('id') != null) {
+      this.id = $element.attr('id');
+    } else if ($element.attr('name') != null) {
+      this.id = $element.attr('name') + '-' + Utils.generateChars(2);
+    } else {
+      this.id = Utils.generateChars(4);
+    }
+
+    this.id = 'select2-' + this.id;
+
     options = options || {};
 
     options.multiple = options.multiple || $element.prop('multiple');

dist/js/select2.js

@@ -563,6 +563,17 @@ define('select2/utils',[], function () {
 
   Utils.Observable = Observable;
 
+  Utils.generateChars = function (length) {
+    var chars = '';
+
+    for (var i = 0; i < length; i++) {
+      var randomChar = Math.floor(Math.random() * 36);
+      chars += randomChar.toString(36);
+    }
+
+    return chars;
+  };
+
   return Utils;
 });
 
@@ -944,16 +955,6 @@ define('select2/selection/single',[
 
     $selection.attr('title', this.$element.attr('title'));
 
-    var id = 'select2-container-';
-
-    for (var i = 0; i < 4; i++) {
-      var r = Math.floor(Math.random() * 16);
-      id += r.toString(16);
-    }
-
-    $selection.find('.rendered-selection').attr('id', id);
-    $selection.attr('aria-labelledby', id);
-
     this.$selection = $selection;
 
     return $selection;
@@ -964,6 +965,11 @@ define('select2/selection/single',[
 
     SingleSelection.__super__.bind.apply(this, arguments);
 
+    var id = container.id + '-container';
+
+    this.$selection.find('.rendered-selection').attr('id', id);
+    this.$selection.attr('aria-labelledby', id);
+
     this.$selection.on('mousedown', function (evt) {
       // Only respond to left clicks
       if (evt.which !== 1) {
@@ -1210,21 +1216,15 @@ define('select2/data/base',[
     // Can be implemented in subclasses
   };
 
-  BaseAdapter.prototype.generateResultId = function (data) {
+  BaseAdapter.prototype.generateResultId = function (container, data) {
-    var id = 'select2-result-';
+    var id = container.id + '-result-';
 
-    for (var i = 0; i < 4; i++) {
+    id += Utils.generateChars(4);
-      var r = Math.floor(Math.random() * 16);
-      id += r.toString(16);
-    }
 
     if (data.id != null) {
       id += '-' + data.id.toString();
     } else {
-      for (var s = 0; s < 4; s++) {
+      id += '-' + Utils.generateChars(4);
-        var idChar = Math.floor(Math.random() * 16);
-        id += idChar.toString(16);
-      }
     }
     return id;
   };
@@ -1315,6 +1315,8 @@ define('select2/data/select',[
   SelectAdapter.prototype.bind = function (container, $container) {
     var self = this;
 
+    this.container = container;
+
     container.on('select', function (params) {
       self.select(params.data);
     });
@@ -1381,7 +1383,7 @@ define('select2/data/select',[
       }
 
       if (data.id) {
-        data._resultId = this.generateResultId(data);
+        data._resultId = this.generateResultId(this.container, data);
       }
 
       $option.data('data', data);
@@ -1721,6 +1723,16 @@ define('select2/core',[
   var Select2 = function ($element, options) {
     this.$element = $element;
 
+    if ($element.attr('id') != null) {
+      this.id = $element.attr('id');
+    } else if ($element.attr('name') != null) {
+      this.id = $element.attr('name') + '-' + Utils.generateChars(2);
+    } else {
+      this.id = Utils.generateChars(4);
+    }
+
+    this.id = 'select2-' + this.id;
+
     options = options || {};
 
     options.multiple = options.multiple || $element.prop('multiple');

src/js/select2/core.js

@@ -6,6 +6,16 @@ define([
   var Select2 = function ($element, options) {
     this.$element = $element;
 
+    if ($element.attr('id') != null) {
+      this.id = $element.attr('id');
+    } else if ($element.attr('name') != null) {
+      this.id = $element.attr('name') + '-' + Utils.generateChars(2);
+    } else {
+      this.id = Utils.generateChars(4);
+    }
+
+    this.id = 'select2-' + this.id;
+
     options = options || {};
 
     options.multiple = options.multiple || $element.prop('multiple');

src/js/select2/data/base.js

@@ -19,21 +19,15 @@ define([
     // Can be implemented in subclasses
   };
 
-  BaseAdapter.prototype.generateResultId = function (data) {
+  BaseAdapter.prototype.generateResultId = function (container, data) {
-    var id = 'select2-result-';
+    var id = container.id + '-result-';
 
-    for (var i = 0; i < 4; i++) {
+    id += Utils.generateChars(4);
-      var r = Math.floor(Math.random() * 16);
-      id += r.toString(16);
-    }
 
     if (data.id != null) {
       id += '-' + data.id.toString();
     } else {
-      for (var s = 0; s < 4; s++) {
+      id += '-' + Utils.generateChars(4);
-        var idChar = Math.floor(Math.random() * 16);
-        id += idChar.toString(16);
-      }
     }
     return id;
   };

src/js/select2/data/select.js

@@ -81,6 +81,8 @@ define([
   SelectAdapter.prototype.bind = function (container, $container) {
     var self = this;
 
+    this.container = container;
+
     container.on('select', function (params) {
       self.select(params.data);
     });
@@ -147,7 +149,7 @@ define([
       }
 
       if (data.id) {
-        data._resultId = this.generateResultId(data);
+        data._resultId = this.generateResultId(this.container, data);
       }
 
       $option.data('data', data);

src/js/select2/selection/single.js

@@ -19,16 +19,6 @@ define([
 
     $selection.attr('title', this.$element.attr('title'));
 
-    var id = 'select2-container-';
-
-    for (var i = 0; i < 4; i++) {
-      var r = Math.floor(Math.random() * 16);
-      id += r.toString(16);
-    }
-
-    $selection.find('.rendered-selection').attr('id', id);
-    $selection.attr('aria-labelledby', id);
-
     this.$selection = $selection;
 
     return $selection;
@@ -39,6 +29,11 @@ define([
 
     SingleSelection.__super__.bind.apply(this, arguments);
 
+    var id = container.id + '-container';
+
+    this.$selection.find('.rendered-selection').attr('id', id);
+    this.$selection.attr('aria-labelledby', id);
+
     this.$selection.on('mousedown', function (evt) {
       // Only respond to left clicks
       if (evt.which !== 1) {

src/js/select2/utils.js

@@ -134,5 +134,16 @@ define([], function () {
 
   Utils.Observable = Observable;
 
+  Utils.generateChars = function (length) {
+    var chars = '';
+
+    for (var i = 0; i < length; i++) {
+      var randomChar = Math.floor(Math.random() * 36);
+      chars += randomChar.toString(36);
+    }
+
+    return chars;
+  };
+
   return Utils;
 });