Added "Add New" support as requested in issue harvesthq#5

chosen/chosen.css

@@ -249,6 +249,9 @@
   cursor: pointer;
   display: list-item;
 }
+.chzn-container .chzn-results .new-result {
+  font-weight: bold;
+}
 .chzn-container .chzn-results .highlighted {
   background: #3875d7;
   color: #fff;

chosen/chosen.jquery.js

@@ -116,7 +116,8 @@
       this.allow_single_deselect = (this.options.allow_single_deselect != null) && this.form_field.options[0].text === "" ? this.options.allow_single_deselect : false;
       this.disable_search_threshold = this.options.disable_search_threshold || 0;
       this.choices = 0;
-      return this.results_none_found = this.options.no_results_text || "No results match";
+      this.results_none_found = this.options.no_results_text || "No results match";
+      return this.new_item_text = this.options.new_item_text || "Add New";
     };
     AbstractChosen.prototype.mouse_enter = function() {
       return this.mouse_on_container = true;
@@ -456,6 +457,9 @@
         this.selected_item.find("span").text(this.default_text);
       }
       content = '';
+      if (this.options.new_item_callback !== void 0) {
+        content += "<li class=\"active-result new-result\">" + this.new_item_text + "</li>";
+      }
       _ref = this.results_data;
       for (_i = 0, _len = _ref.length; _i < _len; _i++) {
         data = _ref[_i];
@@ -630,6 +634,10 @@
       if (this.result_highlight) {
         high = this.result_highlight;
         high_id = high.attr("id");
+        if (high.hasClass("new-result")) {
+          this.options.new_item_callback();
+          return;
+        }
         this.result_clear_highlight();
         if (this.is_multiple) {
           this.result_deactivate(high);

chosen/chosen.proto.js

@@ -116,7 +116,8 @@
       this.allow_single_deselect = (this.options.allow_single_deselect != null) && this.form_field.options[0].text === "" ? this.options.allow_single_deselect : false;
       this.disable_search_threshold = this.options.disable_search_threshold || 0;
       this.choices = 0;
-      return this.results_none_found = this.options.no_results_text || "No results match";
+      this.results_none_found = this.options.no_results_text || "No results match";
+      return this.new_item_text = this.options.new_item_text || "Add New";
     };
     AbstractChosen.prototype.mouse_enter = function() {
       return this.mouse_on_container = true;

coffee/chosen.jquery.coffee

@@ -175,6 +175,10 @@ class Chosen extends AbstractChosen
       @selected_item.find("span").text @default_text
 
     content = ''
+
+    if @options.new_item_callback != undefined
+      content += "<li class=\"active-result new-result\">#{ @new_item_text }</li>"
+
     for data in @results_data
       if data.group
         content += this.result_add_group data
@@ -318,9 +322,15 @@ class Chosen extends AbstractChosen
 
   result_select: (evt) ->
     if @result_highlight
+
+
       high = @result_highlight
       high_id = high.attr "id"
-
+
+      if high.hasClass "new-result"
+        @options.new_item_callback()
+        return
+
       this.result_clear_highlight()
 
       if @is_multiple

coffee/lib/abstract-chosen.coffee

@@ -31,6 +31,7 @@ class AbstractChosen
     @disable_search_threshold = @options.disable_search_threshold || 0
     @choices = 0
     @results_none_found = @options.no_results_text or "No results match"
+    @new_item_text = @options.new_item_text or "Add New"
 
   mouse_enter: -> @mouse_on_container = true
   mouse_leave: -> @mouse_on_container = false

example.jquery.html

@@ -1203,6 +1203,32 @@ <h2>Selected and Disabled Support</h2>
       </div>
     </div>
 
+   <h2>"Add New" Support</h2>
+   <div class="clearfix">
+     <p>Chosen allows you to have a "Add New" option with custom text and callback. If the callback is set the "Add New" option will be displayed</p>
+     <p>
+     <code>
+        $(".chzn-select").chosen({new_item_text: "Add New",new_item_callback:function(){alert("A new item has been added!")}});
+     </code>
+     </p>
+     <div>
+       <select data-placeholder="Your Favorite Types of Bear" style="width:350px;" multiple class="chzn-select-add-new" tabindex="9">
+         <option value=""></option>
+         <option>American Black Bear</option>
+         <option>Asiatic Black Bear</option>
+         <option>Brown Bear</option>
+         <option>Giant Panda</option>
+         <option selected>Sloth Bear</option>
+         <option disabled>Sun Bear</option>
+         <option selected>Polar Bear</option>
+         <option disabled>Spectacled Bear</option>
+       </select>
+       </div>
+     </div>
+
+
+
+
     <h2>Default Text Support</h2>
     <div class="side-by-side clearfix">
       <p>Chosen automatically sets the default field text ("Choose a country...") by reading the select element's data-placeholder value. If no data-placeholder value is present, it will default to "Select Some Option" or "Select Some Options" depending on whether the select is single or multiple. You can change these elements in the plugin js file as you see fit.</p>
@@ -1297,6 +1323,6 @@ <h2>Setup (for jQuery)</h2>
   </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
   <script src="chosen/chosen.jquery.js" type="text/javascript"></script>
-  <script type="text/javascript"> $(".chzn-select").chosen(); $(".chzn-select-deselect").chosen({allow_single_deselect:true}); </script>
+  <script type="text/javascript"> $(".chzn-select").chosen(); $(".chzn-select-deselect").chosen({allow_single_deselect:true});; $(".chzn-select-add-new").chosen({new_item_text: "Add New",new_item_callback:function(){alert("A new item has been added!")}});  </script>
   </form>
 </body>