Merge pull request #1360 from harvesthq/remove-id-dependency

Remove Chosen's ID dependency

coffee/chosen.jquery.coffee

@@ -23,20 +23,18 @@ class Chosen extends AbstractChosen
     @form_field_jq.addClass "chzn-done"
 
   set_up_html: ->
-    @container_id = if @form_field.id.length then @form_field.id.replace(/[^\w]/g, '_') else this.generate_field_id()
-    @container_id += "_chzn"
-
     container_classes = ["chzn-container"]
     container_classes.push "chzn-container-" + (if @is_multiple then "multi" else "single")
     container_classes.push @form_field.className if @inherit_select_classes && @form_field.className
     container_classes.push "chzn-rtl" if @is_rtl
 
     container_props =
-      'id': @container_id
       'class': container_classes.join ' '
       'style': "width: #{this.container_width()};"
       'title': @form_field.title
 
+    container_props.id = @form_field.id.replace(/[^\w]/g, '_') + "_chzn" if @form_field.id.length
+
     @container = ($ "<div />", container_props)
 
     if @is_multiple
@@ -152,7 +150,7 @@ class Chosen extends AbstractChosen
 
 
   test_active_click: (evt) ->
-    if $(evt.target).parents('#' + @container_id).length
+    if @container.is($(evt.target).closest('.chzn-container'))
       @active_field = true
     else
       this.close_field()
@@ -312,7 +310,6 @@ class Chosen extends AbstractChosen
   result_select: (evt) ->
     if @result_highlight
       high = @result_highlight
-      high_id = high.attr "id"
 
       this.result_clear_highlight()
 
@@ -328,8 +325,7 @@ class Chosen extends AbstractChosen
 
       high.addClass "result-selected"
 
-      position = high_id.substr(high_id.lastIndexOf("_") + 1 )
-      item = @results_data[position]
+      item = @results_data[ high[0].getAttribute("data-option-array-index") ]
       item.selected = true
 
       @form_field.options[item.options_index].selected = true
@@ -366,9 +362,6 @@ class Chosen extends AbstractChosen
       @form_field.options[result_data.options_index].selected = false
       @selected_option_count = null
 
-      result = $("#" + @container_id + "_o_" + pos)
-      result.removeClass("result-selected").addClass("active-result").show()
-
       this.result_clear_highlight()
       this.winnow_results() if @results_showing
 
@@ -489,11 +482,5 @@ class Chosen extends AbstractChosen
         w = @f_width - 10
 
       @search_field.css({'width': w + 'px'})
-
-  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
 
 root.Chosen = Chosen

coffee/chosen.proto.coffee

@@ -18,19 +18,18 @@ class Chosen extends AbstractChosen
     @no_results_temp = new Template('<li class="no-results">' + @results_none_found + ' "<span>#{terms}</span>"</li>')
 
   set_up_html: ->
-    @container_id = @form_field.identify().replace(/[^\w]/g, '_') + "_chzn"
-
     container_classes = ["chzn-container"]
     container_classes.push "chzn-container-" + (if @is_multiple then "multi" else "single")
     container_classes.push @form_field.className if @inherit_select_classes && @form_field.className
     container_classes.push "chzn-rtl" if @is_rtl
 
     container_props =
-      'id': @container_id
       'class': container_classes.join ' '
       'style': "width: #{this.container_width()};"
       'title': @form_field.title
 
+    container_props.id = @form_field.id.replace(/[^\w]/g, '_') + "_chzn" if @form_field.id.length
+
     @container = if @is_multiple then new Element('div', container_props).update( @multi_temp.evaluate({ "default": @default_text}) ) else new Element('div', container_props).update( @single_temp.evaluate({ "default":@default_text }) )
 
     @form_field.hide().insert({ after: @container })
@@ -140,7 +139,7 @@ class Chosen extends AbstractChosen
     @search_field.focus()
 
   test_active_click: (evt) ->
-    if evt.target.up('#' + @container_id)
+    if evt.target.up('.chzn-container') is @container
       @active_field = true
     else
       this.close_field()
@@ -314,8 +313,7 @@ class Chosen extends AbstractChosen
 
       high.addClassName("result-selected")
 
-      position = high.id.substr(high.id.lastIndexOf("_") + 1 )
-      item = @results_data[position]
+      item = @results_data[ high.getAttribute("data-option-array-index") ]
       item.selected = true
 
       @form_field.options[item.options_index].selected = true
@@ -353,9 +351,6 @@ class Chosen extends AbstractChosen
       @form_field.options[result_data.options_index].selected = false
       @selected_option_count = null
 
-      result = $(@container_id + "_o_" + pos)
-      result.removeClassName("result-selected").addClassName("active-result").show()
-
       this.result_clear_highlight()
       this.winnow_results() if @results_showing
 

coffee/lib/abstract-chosen.coffee

@@ -76,8 +76,6 @@ class AbstractChosen
     content
 
   result_add_option: (option) ->
-    option.dom_id = @container_id + "_o_" + option.array_index
-
     classes = []
     classes.push "active-result" if !option.disabled and !(option.selected and @is_multiple)
     classes.push "disabled-result" if option.disabled and !(option.selected and @is_multiple)
@@ -87,11 +85,10 @@ class AbstractChosen
 
     style = if option.style.cssText != "" then " style=\"#{option.style}\"" else ""
 
-    """<li id="#{option.dom_id}" class="#{classes.join(' ')}"#{style}>#{option.search_text}</li>"""
+    """<li class="#{classes.join(' ')}"#{style} data-option-array-index="#{option.array_index}">#{option.search_text}</li>"""
 
   result_add_group: (group) ->
-    group.dom_id = @container_id + "_g_" + group.array_index
-    """<li id="#{group.dom_id}" class="group-result">#{group.search_text}</li>"""
+    """<li class="group-result">#{group.search_text}</li>"""
 
   results_update_field: ->
     this.set_default_text()
@@ -197,16 +194,6 @@ class AbstractChosen
         # don't do anything on these keys
       else this.results_search()
 
-  generate_field_id: ->
-    new_id = this.generate_random_id()
-    @form_field.id = new_id
-    new_id
-
-  generate_random_char: ->
-    chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"
-    rand = Math.floor(Math.random() * chars.length)
-    newchar = chars.substring rand, rand+1
-
   container_width: ->
     return if @options.width? then @options.width else "#{@form_field.offsetWidth}px"