Merge branch 'limit-494' of https://github.com/polycode/chosen into p…

…olycode-limit-494

Conflicts:
	chosen/chosen.jquery.min.js
	chosen/chosen.proto.min.js

chosen/chosen.jquery.js

@@ -131,6 +131,7 @@ Copyright (c) 2011 by Harvest
       this.disable_search_threshold = this.options.disable_search_threshold || 0;
       this.search_contains = this.options.search_contains || false;
       this.choices = 0;
+      this.max_selected_options = this.options.max_selected_options || Infinity;
       return this.results_none_found = this.options.no_results_text || "No results match";
     };
 
@@ -558,6 +559,11 @@ Copyright (c) 2011 by Harvest
         if (this.result_single_selected) {
           this.result_do_highlight(this.result_single_selected);
         }
+      } else if (this.max_selected_options <= this.choices) {
+        this.form_field_jq.trigger("liszt:maxselected", {
+          chosen: this
+        });
+        return false;
       }
       dd_top = this.is_multiple ? this.container.height() : this.container.height() - 1;
       this.dropdown.css({
@@ -636,6 +642,12 @@ Copyright (c) 2011 by Harvest
     Chosen.prototype.choice_build = function(item) {
       var choice_id, link,
         _this = this;
+      if (this.is_multiple && this.max_selected_options <= this.choices) {
+        this.form_field_jq.trigger("liszt:maxselected", {
+          chosen: this
+        });
+        return false;
+      }
       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.html + '</span><a href="javascript:void(0)" class="search-choice-close" rel="' + item.array_index + '"></a></li>');

chosen/chosen.proto.js

@@ -131,6 +131,7 @@ Copyright (c) 2011 by Harvest
       this.disable_search_threshold = this.options.disable_search_threshold || 0;
       this.search_contains = this.options.search_contains || false;
       this.choices = 0;
+      this.max_selected_options = this.options.max_selected_options || Infinity;
       return this.results_none_found = this.options.no_results_text || "No results match";
     };
 
@@ -546,6 +547,11 @@ Copyright (c) 2011 by Harvest
         if (this.result_single_selected) {
           this.result_do_highlight(this.result_single_selected);
         }
+      } else if (this.max_selected_options <= this.choices) {
+        this.form_field.fire("liszt:maxselected", {
+          chosen: this
+        });
+        return false;
       }
       dd_top = this.is_multiple ? this.container.getHeight() : this.container.getHeight() - 1;
       this.dropdown.setStyle({
@@ -624,6 +630,12 @@ Copyright (c) 2011 by Harvest
     Chosen.prototype.choice_build = function(item) {
       var choice_id, link,
         _this = this;
+      if (this.is_multiple && this.max_selected_options <= this.choices) {
+        this.form_field.fire("liszt:maxselected", {
+          chosen: this
+        });
+        return false;
+      }
       choice_id = this.container_id + "_c_" + item.array_index;
       this.choices += 1;
       this.search_container.insert({

coffee/chosen.jquery.coffee

@@ -234,6 +234,9 @@ class Chosen extends AbstractChosen
       @selected_item.addClass "chzn-single-with-drop"
       if @result_single_selected
         this.result_do_highlight( @result_single_selected )
+    else if @max_selected_options <= @choices
+      @form_field_jq.trigger("liszt:maxselected", {chosen: this})
+      return false
 
     dd_top = if @is_multiple then @container.height() else (@container.height() - 1)
     @dropdown.css {"top":  dd_top + "px", "left":0}
@@ -290,6 +293,9 @@ class Chosen extends AbstractChosen
       this.results_show()
 
   choice_build: (item) ->
+    if @is_multiple and @max_selected_options <= @choices
+      @form_field_jq.trigger("liszt:maxselected", {chosen: this})
+      return false # fire event
     choice_id = @container_id + "_c_" + item.array_index
     @choices += 1
     @search_container.before  '<li class="search-choice" id="' + choice_id + '"><span>' + item.html + '</span><a href="javascript:void(0)" class="search-choice-close" rel="' + item.array_index + '"></a></li>'

coffee/chosen.proto.coffee

@@ -224,6 +224,9 @@ class Chosen extends AbstractChosen
       @selected_item.addClassName('chzn-single-with-drop')
       if @result_single_selected
         this.result_do_highlight( @result_single_selected )
+    else if @max_selected_options <= @choices
+      @form_field.fire("liszt:maxselected", {chosen: this})
+      return false
 
     dd_top = if @is_multiple then @container.getHeight() else (@container.getHeight() - 1)
     @dropdown.setStyle {"top":  dd_top + "px", "left":0}
@@ -280,6 +283,9 @@ class Chosen extends AbstractChosen
       this.results_show()
 
   choice_build: (item) ->
+    if @is_multiple and @max_selected_options <= @choices
+      @form_field.fire("liszt:maxselected", {chosen: this})
+      return false
     choice_id = @container_id + "_c_" + item.array_index
     @choices += 1
     @search_container.insert

coffee/lib/abstract-chosen.coffee

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

example.jquery.html

@@ -1217,6 +1217,18 @@ <h2>No Results Text Support</h2>
         $(".chzn-select").chosen({no_results_text: "No results matched"});
       </code>
     </div>
+
+    <h2>Limit Selected Options in Multiselect</h2>
+    <div class="side-by-side clearfix">
+      <p>You can easily limit how many options can user select:</p>
+      <code>
+        $(".chzn-select").chosen({max_selected_options: 5});
+      </code>
+      <p>If you try to select another option with limit reached <code>liszt:maxselected</code> event is triggered:</p>
+      <code>
+        $(".chzn-select").bind("liszt:maxselected", function () { ... });
+      </code>
+    </div>
 
     <h2>Allow Deselect on Single Selects</h2>
     <div class="side-by-side clearfix">

example.proto.html

@@ -1213,7 +1213,19 @@ <h2>No Results Text Support</h2>
     <div class="side-by-side clearfix">
       <p>Setting the "No results" search text is as easy as passing an option when you create Chosen:</p>
       <code>
-        New Chosen($("chzn_select_field"),{no_results_text: "No results matched"});
+        new Chosen($("chzn_select_field"),{no_results_text: "No results matched"});
+      </code>
+    </div>
+
+    <h2>Limit Selected Options in Multiselect</h2>
+    <div class="side-by-side clearfix">
+      <p>You can easily limit how many options can user select:</p>
+      <code>
+        new Chosen($("chzn_select_field"),{max_selected_options: 5});
+      </code>
+      <p>If you try to select another option with limit reached <code>liszt:maxselected</code> event is triggered:</p>
+      <code>
+        $("chzn_select_field").observe("liszt:maxselected", function(evt) { ... });
       </code>
     </div>