If no id is present, generate a random.

chosen/chosen.jquery.js

@@ -43,7 +43,8 @@
     };
     Chosen.prototype.set_up_html = function() {
       var container_div, dd_top, dd_width, sf_width;
-      this.container_id = this.form_field.id + "_chzn";
+      this.container_id = this.form_field.id.length ? this.form_field.id : this.generate_field_id();
+      this.container_id += "_chzn";
       this.f_width = this.form_field_jq.width();
       this.default_text = this.form_field_jq.attr('title') ? this.form_field_jq.attr('title') : this.default_text_default;
       container_div = $("<div />", {
@@ -199,7 +200,7 @@
       return this.search_field.focus();
     };
     Chosen.prototype.test_active_click = function(evt) {
-      if ($(evt.target).parents('#' + this.container.id).length) {
+      if ($(evt.target).parents('#' + this.container_id).length) {
         return this.active_field = true;
       } else {
         return this.close_field();
@@ -238,7 +239,7 @@
     };
     Chosen.prototype.result_add_group = function(group) {
       if (!group.disabled) {
-        group.dom_id = this.form_field.id + "chzn_g_" + group.array_index;
+        group.dom_id = this.container_id + "_g_" + group.array_index;
         return '<li id="' + group.dom_id + '" class="group-result">' + $("<div />").text(group.label).html() + '</li>';
       } else {
         return "";
@@ -247,7 +248,7 @@
     Chosen.prototype.result_add_option = function(option) {
       var classes;
       if (!option.disabled) {
-        option.dom_id = this.form_field.id + "chzn_o_" + option.array_index;
+        option.dom_id = this.container_id + "_o_" + option.array_index;
         classes = option.selected && this.is_multiple ? [] : ["active-result"];
         if (option.selected) {
           classes.push("result-selected");
@@ -374,7 +375,7 @@
     };
     Chosen.prototype.choice_build = function(item) {
       var choice_id, link;
-      choice_id = this.form_field.id + "_chzn_c_" + item.array_index;
+      choice_id = this.container_id + "_c_" + item.array_index;
       this.choices += 1;
       this.search_container.before('<li class="search-choice" id="' + choice_id + '"><span>' + item.text + '</span><a href="javascript:void(0)" class="search-choice-close" rel="' + item.array_index + '"></a></li>');
       link = $('#' + choice_id).find("a").first();
@@ -434,7 +435,7 @@
       result_data = this.results_data[pos];
       result_data.selected = false;
       this.form_field.options[result_data.options_index].selected = false;
-      result = $("#" + this.form_field.id + "chzn_o_" + pos);
+      result = $("#" + this.container_id + "_o_" + pos);
       result.removeClass("result-selected").addClass("active-result").show();
       this.result_clear_highlight();
       this.winnow_results();
@@ -677,6 +678,26 @@
         });
       }
     };
+    Chosen.prototype.generate_field_id = function() {
+      var new_id;
+      new_id = this.generate_random_id();
+      this.form_field.id = new_id;
+      return new_id;
+    };
+    Chosen.prototype.generate_random_id = function() {
+      var string;
+      string = 'sel' + this.generate_random_char() + this.generate_random_char() + this.generate_random_char();
+      while ($("#" + string).length > 0) {
+        string += this.generate_random_char();
+      }
+      return string;
+    };
+    Chosen.prototype.generate_random_char = function() {
+      var char, chars, random;
+      chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZ";
+      random = Math.floor(Math.random() * chars.length);
+      return char = chars.substring(random, random + 1);
+    };
     return Chosen;
   })();
   get_side_border_padding = function(elmt) {

coffee/chosen.jquery.coffee

@@ -43,7 +43,8 @@ class Chosen
     @choices = 0
 
   set_up_html: ->
-    @container_id = @form_field.id + "_chzn"
+    @container_id = if @form_field.id.length then @form_field.id else this.generate_field_id()
+    @container_id += "_chzn"
     
     @f_width = @form_field_jq.width()
     
@@ -170,7 +171,7 @@ class Chosen
 
 
   test_active_click: (evt) ->
-    if $(evt.target).parents('#' + @container.id).length
+    if $(evt.target).parents('#' + @container_id).length
       @active_field = true
     else
       this.close_field()
@@ -206,14 +207,14 @@ class Chosen
 
   result_add_group: (group) ->
     if not group.disabled
-      group.dom_id = @form_field.id + "chzn_g_" + group.array_index
+      group.dom_id = @container_id + "_g_" + group.array_index
       '<li id="' + group.dom_id + '" class="group-result">' + $("<div />").text(group.label).html() + '</li>'
     else
       ""
   
   result_add_option: (option) ->
     if not option.disabled
-      option.dom_id = @form_field.id + "chzn_o_" + option.array_index
+      option.dom_id = @container_id + "_o_" + option.array_index
       
       classes = if option.selected and @is_multiple then [] else ["active-result"]
       classes.push "result-selected" if option.selected
@@ -318,7 +319,7 @@ class Chosen
       this.results_show()
 
   choice_build: (item) ->
-    choice_id = @form_field.id + "_chzn_c_" + item.array_index
+    choice_id = @container_id + "_c_" + item.array_index
     @choices += 1
     @search_container.before  '<li class="search-choice" id="' + choice_id + '"><span>' + item.text + '</span><a href="javascript:void(0)" class="search-choice-close" rel="' + item.array_index + '"></a></li>'
     link = $('#' + choice_id).find("a").first()
@@ -380,7 +381,7 @@ class Chosen
     result_data.selected = false
 
     @form_field.options[result_data.options_index].selected = false
-    result = $("#" + @form_field.id + "chzn_o_" + pos)
+    result = $("#" + @container_id + "_o_" + pos)
     result.removeClass("result-selected").addClass("active-result").show()
 
     this.result_clear_highlight()
@@ -577,6 +578,22 @@ class Chosen
 
       dd_top = @container.height()
       @dropdown.css({"top":  dd_top + "px"})
+  
+  generate_field_id: ->
+    new_id = this.generate_random_id()
+    @form_field.id = new_id
+    new_id
+  
+  generate_random_id: ->
+    string = 'sel' + this.generate_random_char() + this.generate_random_char() + this.generate_random_char()
+    while $("#" + string).length > 0
+      string += this.generate_random_char()
+    string
+    
+  generate_random_char: ->
+    chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZ";
+    random = Math.floor(Math.random() * chars.length)
+    char = chars.substring random, random+1
 
 get_side_border_padding = (elmt) ->
   side_border_padding = elmt.outerWidth() - elmt.width()

example.jquery.html

@@ -306,7 +306,7 @@
       </div>
       <div>
         <em>Into This</em>        
-        <select title="Choose a Country..." class="chzn-select" style="width:350px;" tabindex="2" id="single_example">
+        <select title="Choose a Country..." class="chzn-select" style="width:350px;" tabindex="2">
           <option value=""></option> 
           <option value="United States">United States</option> 
           <option value="United Kingdom">United Kingdom</option> 
@@ -807,7 +807,7 @@
       </div>
       <div>
         <em>Into This</em>        
-        <select title="Choose a Country..." class="chzn-select" multiple style="width:350px;" tabindex="4" id="multi_example">
+        <select title="Choose a Country..." class="chzn-select" multiple style="width:350px;" tabindex="4">
           <option value=""></option> 
           <option value="United States">United States</option> 
           <option value="United Kingdom">United Kingdom</option> 
@@ -1060,7 +1060,7 @@
     <div class="side-by-side clearfix">
       <div>
         <em>Single Select with Groups</em>
-        <select id="nfl_team_single" title="Your Favorite Football Team" style="width:350px;" class="chzn-select" tabindex="5">
+        <select title="Your Favorite Football Team" style="width:350px;" class="chzn-select" tabindex="5">
           <option value=""></option>
           <optgroup label="NFC East">
             <option>Dallas Cowboys</option>
@@ -1114,7 +1114,7 @@
       </div>
       <div>
         <em>Multiple Select with Groups</em>
-        <select id="nfl_team_multi" title="Your Favorite Football Team" style="width:350px;" class="chzn-select" multiple tabindex="6">
+        <select title="Your Favorite Football Team" style="width:350px;" class="chzn-select" multiple tabindex="6">
           <option value=""></option>
           <optgroup label="NFC East">
             <option>Dallas Cowboys</option>
@@ -1173,7 +1173,7 @@
       <p>Chosen automatically highlights selected options and removes disabled options.</p>
       <div>
         <em>Single Select</em>
-        <select id="bears_single" title="Your Favorite Type of Bear" style="width:350px;" class="chzn-select" tabindex="7">
+        <select title="Your Favorite Type of Bear" style="width:350px;" class="chzn-select" tabindex="7">
           <option value=""></option>
           <option>American Black Bear</option>
           <option>Asiatic Black Bear</option>
@@ -1187,7 +1187,7 @@
       </div>
       <div>
         <em>Multiple Select with Groups</em>
-        <select id="bears_multiple" title="Your Favorite Types of Bear" style="width:350px;" multiple class="chzn-select" tabindex="8">
+        <select title="Your Favorite Types of Bear" style="width:350px;" multiple class="chzn-select" tabindex="8">
           <option value=""></option>
           <option>American Black Bear</option>
           <option>Asiatic Black Bear</option>