Add deselect example and update to latest version of Chosen.

chosen/chosen.css

@@ -57,6 +57,19 @@
   -ms-text-overflow: ellipsis;
   text-overflow: ellipsis;
 }
+.chzn-container-single .chzn-single abbr {
+  display: block;
+  position: absolute;
+  right: 26px;
+  top: 8px;
+  width: 12px;
+  height: 13px;
+  font-size: 1px;
+  background: url(chosen-sprite.png) right top no-repeat;
+}
+.chzn-container-single .chzn-single abbr:hover {
+  background-position: right -11px;
+}
 .chzn-container-single .chzn-single div {
   -webkit-border-radius: 0 4px 4px 0;
   -moz-border-radius   : 0 4px 4px 0;
@@ -191,18 +204,18 @@
 .chzn-container-multi .chzn-choices .search-choice .search-choice-close {
   display: block;
   position: absolute;
-  right: 5px;
+  right: 3px;
-  top: 6px;
+  top: 4px;
-  width: 8px;
+  width: 12px;
-  height: 9px;
+  height: 13px;
   font-size: 1px;
   background: url(chosen-sprite.png) right top no-repeat;
 }
 .chzn-container-multi .chzn-choices .search-choice .search-choice-close:hover {
-  background-position: right -9px;
+  background-position: right -11px;
 }
 .chzn-container-multi .chzn-choices .search-choice-focus .search-choice-close {
-  background-position: right -9px;
+  background-position: right -11px;
 }
 /* @end */
 
@@ -311,6 +324,9 @@
 .chzn-disabled .chzn-single {
   cursor: default;
 }
+.chzn-disabled .chzn-choices .search-choice .search-choice-close {
+  cursor: default;
+}
 
 /* @group Right to Left */
 .chzn-rtl { direction:rtl;text-align: right; }

chosen/chosen.jquery.js

@@ -52,6 +52,7 @@
       this.results_showing = false;
       this.result_highlighted = null;
       this.result_single_selected = null;
+      this.allow_single_deselect = (this.options.allow_single_deselect != null) && this.form_field.options[0].text === "" ? this.options.allow_single_deselect : false;
       this.choices = 0;
       return this.results_none_found = this.options.no_results_text || "No results match";
     };
@@ -103,6 +104,9 @@
       this.container.mousedown(__bind(function(evt) {
         return this.container_mousedown(evt);
       }, this));
+      this.container.mouseup(__bind(function(evt) {
+        return this.container_mouseup(evt);
+      }, this));
       this.container.mouseenter(__bind(function(evt) {
         return this.mouse_enter(evt);
       }, this));
@@ -145,8 +149,9 @@
         this.container.addClass('chzn-disabled');
         this.search_field.attr('disabled', true);
         if (!this.is_multiple) {
-          return this.selected_item.unbind("focus", this.activate_action);
+          this.selected_item.unbind("focus", this.activate_action);
         }
+        return this.close_field();
       } else {
         this.container.removeClass('chzn-disabled');
         this.search_field.attr('disabled', false);
@@ -156,11 +161,13 @@
       }
     };
     Chosen.prototype.container_mousedown = function(evt) {
+      var target_node;
       if (!this.is_disabled) {
+        target_node = evt != null ? evt.target.nodeName : null;
         if (evt && evt.type === "mousedown") {
           evt.stopPropagation();
         }
-        if (!this.pending_destroy_click) {
+        if (!this.pending_destroy_click && target_node !== "ABBR") {
           if (!this.active_field) {
             if (this.is_multiple) {
               this.search_field.val("");
@@ -177,6 +184,11 @@
         }
       }
     };
+    Chosen.prototype.container_mouseup = function(evt) {
+      if (evt.target.nodeName === "ABBR") {
+        return this.results_reset(evt);
+      }
+    };
     Chosen.prototype.mouse_enter = function() {
       return this.mouse_on_container = true;
     };
@@ -257,6 +269,9 @@
             this.choice_build(data);
           } else if (data.selected && !this.is_multiple) {
             this.selected_item.find("span").text(data.text);
+            if (this.allow_single_deselect) {
+              this.selected_item.find("span").first().after("<abbr></abbr>");
+            }
           }
         }
       }
@@ -414,8 +429,12 @@
     };
     Chosen.prototype.choice_destroy_link_click = function(evt) {
       evt.preventDefault();
-      this.pending_destroy_click = true;
+      if (!this.is_disabled) {
-      return this.choice_destroy($(evt.target));
+        this.pending_destroy_click = true;
+        return this.choice_destroy($(evt.target));
+      } else {
+        return evt.stopPropagation;
+      }
     };
     Chosen.prototype.choice_destroy = function(link) {
       this.choices -= 1;
@@ -426,18 +445,29 @@
       this.result_deselect(link.attr("rel"));
       return link.parents('li').first().remove();
     };
+    Chosen.prototype.results_reset = function(evt) {
+      this.form_field.options[0].selected = true;
+      this.selected_item.find("span").text(this.default_text);
+      this.show_search_field_default();
+      $(evt.target).remove();
+      this.form_field_jq.trigger("change");
+      if (this.active_field) {
+        return this.results_hide();
+      }
+    };
     Chosen.prototype.result_select = function(evt) {
       var high, high_id, item, position;
       if (this.result_highlight) {
         high = this.result_highlight;
         high_id = high.attr("id");
         this.result_clear_highlight();
-        high.addClass("result-selected");
         if (this.is_multiple) {
           this.result_deactivate(high);
         } else {
+          this.search_results.find(".result-selected").removeClass("result-selected");
           this.result_single_selected = high;
         }
+        high.addClass("result-selected");
         position = high_id.substr(high_id.lastIndexOf("_") + 1);
         item = this.results_data[position];
         item.selected = true;
@@ -446,6 +476,9 @@
           this.choice_build(item);
         } else {
           this.selected_item.find("span").first().text(item.text);
+          if (this.allow_single_deselect) {
+            this.selected_item.find("span").first().after("<abbr></abbr>");
+          }
         }
         if (!(evt.metaKey && this.is_multiple)) {
           this.results_hide();

index.html

@@ -1205,6 +1205,24 @@
             </code>
           </div>
           
+          <h2>Allow Deselect on Single Selects</h2>
+          <div class="side-by-side clearfix">
+            <p>When a single select box isn't a required field, you can set <code>allow_single_deselect: true</code> and Chosen will add a UI element for option deselection. This will only work if the first option has blank text.</p>
+            <div class="side-by-side clearfix">
+              <select data-placeholder="Your Favorite Type of Bear" style="width:350px;" class="chzn-select-deselect" tabindex="7">
+                <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>Sun Bear</option>
+                <option>Polar Bear</option>
+                <option>Spectacled Bear</option>
+              </select>
+            </div>
+          </div>
+          
           <h2>Change / Update Events</h2>
           <div class="side-by-side clearfix">
             <ul>
@@ -1292,6 +1310,7 @@
         <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">