diff --git a/chosen/chosen-sprite.png b/chosen/chosen-sprite.png index f20db44..3a0a0ec 100644 Binary files a/chosen/chosen-sprite.png and b/chosen/chosen-sprite.png differ diff --git a/chosen/chosen.css b/chosen/chosen.css index 6d7dc39..84f7752 100644 --- a/chosen/chosen.css +++ b/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; - top: 6px; - width: 8px; - height: 9px; + right: 3px; + top: 4px; + width: 12px; + 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; } diff --git a/chosen/chosen.jquery.js b/chosen/chosen.jquery.js index 0802d49..1c19c5f 100644 --- a/chosen/chosen.jquery.js +++ b/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(""); + } } } } @@ -414,8 +429,12 @@ }; Chosen.prototype.choice_destroy_link_click = function(evt) { evt.preventDefault(); - this.pending_destroy_click = true; - return this.choice_destroy($(evt.target)); + if (!this.is_disabled) { + 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(""); + } } if (!(evt.metaKey && this.is_multiple)) { this.results_hide(); diff --git a/index.html b/index.html index f976b67..52ff51c 100644 --- a/index.html +++ b/index.html @@ -1205,6 +1205,24 @@ +

Allow Deselect on Single Selects

+
+

When a single select box isn't a required field, you can set allow_single_deselect: true and Chosen will add a UI element for option deselection. This will only work if the first option has blank text.

+
+ +
+
+

Change / Update Events