Feature: Option adding

coffee/chosen.jquery.coffee

@@ -184,7 +184,7 @@ class Chosen extends AbstractChosen
       @search_choices.find("li.search-choice").remove()
     else if not @is_multiple
       this.single_set_selected_text()
-      if @disable_search or @form_field.options.length <= @disable_search_threshold
+      if @disable_search or @form_field.options.length <= @disable_search_threshold and not @create_option
         @search_field[0].readOnly = true
         @container.addClass "chosen-container-single-nosearch"
       else
@@ -329,6 +329,10 @@ class Chosen extends AbstractChosen
     if @result_highlight
       high = @result_highlight
 
+      if high.hasClass "create-option"
+        this.select_create_option(@search_field.val())
+        return this.results_hide()
+
       this.result_clear_highlight()
 
       if @is_multiple and @max_selected_options <= this.choices_count()
@@ -396,7 +400,6 @@ class Chosen extends AbstractChosen
     if @search_field.val() is @default_text then "" else $('<div/>').text($.trim(@search_field.val())).html()
 
   winnow_results_set_highlight: ->
-
     selected_results = if not @is_multiple then @search_results.find(".result-selected.active-result") else []
     do_high = if selected_results.length then selected_results.first() else @search_results.find(".active-result").first()
 
@@ -405,17 +408,38 @@ class Chosen extends AbstractChosen
   no_results: (terms) ->
     no_results_html = $('<li class="no-results">' + @results_none_found + ' "<span></span>"</li>')
     no_results_html.find("span").first().html(terms)
-
     @search_results.append no_results_html
     @form_field_jq.trigger("chosen:no_results", {chosen:this})
 
+  show_create_option: (terms) ->
+    create_option_html = $('<li class="create-option active-result"><a>' + @create_option_text + '</a>: "' + terms + '"</li>')
+    @search_results.append create_option_html
+
+  create_option_clear: ->
+    @search_results.find(".create-option").remove()
+
+  select_create_option: (terms) ->
+    if $.isFunction(@create_option)
+      @create_option.call this, terms
+    else
+      this.select_append_option( {value: terms, text: terms} )
+
+  select_append_option: ( options ) ->
+    option = $('<option />', options ).attr('selected', 'selected')
+    @form_field_jq.append option
+    @form_field_jq.trigger "chosen:updated"
+    @form_field_jq.trigger "change"
+    @search_field.trigger "focus"
+
   no_results_clear: ->
     @search_results.find(".no-results").remove()
 
   keydown_arrow: ->
     if @results_showing and @result_highlight
       next_sib = @result_highlight.nextAll("li.active-result").first()
       this.result_do_highlight next_sib if next_sib
+    else if @results_showing and @create_option
+      this.result_do_highlight(@search_results.find('.create-option'))
     else
       this.results_show()
 

coffee/chosen.proto.coffee

@@ -10,7 +10,9 @@ class @Chosen extends AbstractChosen
     # HTML Templates
     @single_temp = new Template('<a class="chosen-single chosen-default" tabindex="-1"><span>#{default}</span><div><b></b></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" autocomplete="off" /></div><ul class="chosen-results"></ul></div>')
     @multi_temp = new Template('<ul class="chosen-choices"><li class="search-field"><input type="text" value="#{default}" class="default" autocomplete="off" style="width:25px;" /></li></ul><div class="chosen-drop"><ul class="chosen-results"></ul></div>')
-    @no_results_temp = new Template('<li class="no-results">' + @results_none_found + ' "<span>#{terms}</span>"</li>')
+    @no_results_temp = new Template('<li class="no-results">' + @results_none_found + ' "<span>#{terms}</span>".</li>')
+    @new_option_temp = new Template('<option value="#{value}">#{text}</option>')
+    @create_option_temp = new Template('<li class="create-option active-result"><a>#{text}</a>: "#{terms}"</li>')
 
   set_up_html: ->
     container_classes = ["chosen-container"]
@@ -178,7 +180,7 @@ class @Chosen extends AbstractChosen
       @search_choices.select("li.search-choice").invoke("remove")
     else if not @is_multiple
       this.single_set_selected_text()
-      if @disable_search or @form_field.options.length <= @disable_search_threshold
+      if @disable_search or @form_field.options.length <= @disable_search_threshold and not @create_option
         @search_field.readOnly = true
         @container.addClassName "chosen-container-single-nosearch"
       else
@@ -322,6 +324,11 @@ class @Chosen extends AbstractChosen
   result_select: (evt) ->
     if @result_highlight
       high = @result_highlight
+
+      if high.hasClassName "create-option"
+        this.select_create_option(@search_field.value)
+        return this.results_hide()
+
       this.result_clear_highlight()
 
       if @is_multiple and @max_selected_options <= this.choices_count()
@@ -403,15 +410,39 @@ class @Chosen extends AbstractChosen
     @search_results.insert @no_results_temp.evaluate( terms: terms )
     @form_field.fire("chosen:no_results", {chosen: this})
 
+  show_create_option: (terms) ->
+    create_option_html = @create_option_temp.evaluate( terms: terms, text: @create_option_text )
+    @search_results.insert create_option_html
+    @search_results.down(".create-option").observe "click", (evt) => this.select_create_option(terms)
+
+  create_option_clear: ->
+    co = null
+    co.remove() while co = @search_results.down(".create-option")
+
+  select_create_option: ( terms ) ->
+    if Object.isFunction( @create_option )
+      @create_option.call this, terms
+    else
+      this.select_append_option( value: terms, text: terms )
+
+  select_append_option: ( options ) ->
+    option = @new_option_temp.evaluate( options )
+    @form_field.insert option
+    Event.fire @form_field, "chosen:updated"
+    if typeof Event.simulate is 'function'
+      @form_field.simulate("change")
+      @search_field.simulate("focus")
+
   no_results_clear: ->
     nr = null
     nr.remove() while nr = @search_results.down(".no-results")
 
-
   keydown_arrow: ->
     if @results_showing and @result_highlight
       next_sib = @result_highlight.next('.active-result')
       this.result_do_highlight next_sib if next_sib
+    else if @results_showing and @create_option
+      this.result_do_highlight(@search_results.select('.create-option').first())
     else
       this.results_show()
 

coffee/lib/abstract-chosen.coffee

@@ -29,6 +29,9 @@ class AbstractChosen
     @inherit_select_classes = @options.inherit_select_classes || false
     @display_selected_options = if @options.display_selected_options? then @options.display_selected_options else true
     @display_disabled_options = if @options.display_disabled_options? then @options.display_disabled_options else true
+    @create_option = @options.create_option || false
+    @persistent_create_option = @options.persistent_create_option || false
+    @skip_no_results = @options.skip_no_results || false
 
   set_default_text: ->
     if @form_field.getAttribute("data-placeholder")
@@ -39,6 +42,7 @@ class AbstractChosen
       @default_text = @options.placeholder_text_single || @options.placeholder_text || AbstractChosen.default_single_text
 
     @results_none_found = @form_field.getAttribute("data-no_results_text") || @options.no_results_text || AbstractChosen.default_no_result_text
+    @create_option_text = @form_field.getAttribute("data-create_option_text") || @options.create_option_text || AbstractChosen.default_create_option_text
 
   mouse_enter: -> @mouse_on_container = true
   mouse_leave: -> @mouse_on_container = false
@@ -101,6 +105,9 @@ class AbstractChosen
 
     this.outerHTML(group_el)
 
+  append_option: (option) ->
+    this.select_append_option(option)
+
   results_update_field: ->
     this.set_default_text()
     this.results_reset_cleanup() if not @is_multiple
@@ -128,12 +135,14 @@ class AbstractChosen
     this.no_results_clear()
 
     results = 0
+    exact_result = false
 
     searchText = this.get_search_text()
     escapedSearchText = searchText.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&")
     regexAnchor = if @search_contains then "" else "^"
     regex = new RegExp(regexAnchor + escapedSearchText, 'i')
     zregex = new RegExp(escapedSearchText, 'i')
+    eregex = new RegExp('^' + escapedSearchText + '$', 'i')
 
     for option in @results_data
 
@@ -157,6 +166,8 @@ class AbstractChosen
           option.search_match = this.search_string_match(option.search_text, regex)
           results += 1 if option.search_match and not option.group
 
+          exact_result = eregex.test option.html
+
           if option.search_match
             if searchText.length
               startpos = option.search_text.search zregex
@@ -172,11 +183,14 @@ class AbstractChosen
 
     if results < 1 and searchText.length
       this.update_results_content ""
-      this.no_results searchText
+      this.no_results searchText unless @create_option and @skip_no_results
     else
       this.update_results_content this.results_option_build()
       this.winnow_results_set_highlight()
 
+    if @create_option and (results < 1 or (!exact_result and @persistent_create_option)) and searchText.length
+      this.show_create_option( searchText )
+
   search_string_match: (search_string, regex) ->
     if regex.test search_string
       return true
@@ -266,4 +280,4 @@ class AbstractChosen
   @default_multiple_text: "Select Some Options"
   @default_single_text: "Select an Option"
   @default_no_result_text: "No results match"
-
+  @default_create_option_text: "Add Option"