diff --git a/chosen-arrows.png b/chosen-arrows.png
new file mode 100644
index 0000000..01a6541
Binary files /dev/null and b/chosen-arrows.png differ
diff --git a/chosen-close.png b/chosen-close.png
new file mode 100644
index 0000000..69084cd
Binary files /dev/null and b/chosen-close.png differ
diff --git a/chosen.css b/chosen.css
index e979a30..75e0f37 100644
--- a/chosen.css
+++ b/chosen.css
@@ -1,32 +1,47 @@
-div.chzn-container { font-family: sans-serif; position: relative; }
+/* line 3, sass/chosen.scss */
+div.chzn-container {
+ font-size: 82.5%;
+ position: relative;
+}
div.chzn-container input {
+ background: #fff;
+ background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
+ background-image: -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
border: 1px solid #aaa;
font-family: sans-serif;
font-size: 1em;
margin: 0px;
- padding: 5px;
- width: 90%;
+ padding: 4px 5px;
outline: none;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
+ -o-border-radius: 3px;
+ -ms-border-radius: 3px;
+ -khtml-border-radius: 3px;
border-radius: 3px;
- background: #fff;
- background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
- background-image: -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
- height: 25px;
- line-height: 25px;
- padding: 0 5px;
}
-div.chzn-container input:focus {
+div.chzn-container textarea:focus {
border-color: #058cf5;
-moz-box-shadow: 0px 0px 5px #999;
-webkit-box-shadow: 0px 0px 5px #999;
box-shadow: 0px 0px 5px #999;
}
-div.chzn-container div.chzn-drop { background: #FFF; border: 1px solid #BBB; border-width: 0 1px 1px; left: 0; position: absolute; top: 29px; -webkit-box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.15); box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15); z-index: 20; }
-
+/* line 6, sass/chosen.scss */
+div.chzn-container div.chzn-drop {
+ background: #FFF;
+ border: 1px solid #BBB;
+ border-width: 0 1px 1px;
+ left: 0;
+ position: absolute;
+ top: 29px;
+ -webkit-box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.15);
+ -moz-box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.15);
+ box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
+ z-index: 20;
+}
+/* line 19, sass/chosen.scss */
div.chzn-container a.chzn-single {
background: #FFF;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white));
@@ -36,27 +51,80 @@ div.chzn-container a.chzn-single {
overflow: hidden;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
+ -o-border-radius: 3px;
+ -ms-border-radius: 3px;
+ -khtml-border-radius: 3px;
border-radius: 3px;
height: 28px;
color: #666;
line-height: 28px;
- padding: 0px 8px;
+ padding: 0px 0px 0px 8px;
position: relative;
text-decoration: none;
z-index: 19;
+ white-space: nowrap;
}
-/* line 36, sass/chosen.scss */
+/* line 35, sass/chosen.scss */
+div.chzn-container a.chzn-single span {
+ display: block;
+ margin-right: 26px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+/* line 41, sass/chosen.scss */
+div.chzn-container a.chzn-single div {
+ -moz-border-radius-topright: 2px;
+ -webkit-border-top-right-radius: 2px;
+ -o-border-top-right-radius: 2px;
+ -ms-border-top-right-radius: 2px;
+ -khtml-border-top-right-radius: 2px;
+ border-top-right-radius: 2px;
+ -moz-border-radius-bottomright: 2px;
+ -webkit-border-bottom-right-radius: 2px;
+ -o-border-bottom-right-radius: 2px;
+ -ms-border-bottom-right-radius: 2px;
+ -khtml-border-bottom-right-radius: 2px;
+ border-bottom-right-radius: 2px;
+ background: #EEE;
+ background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, white), color-stop(0.5, #eeeeee));
+ background-image: -moz-linear-gradient(center bottom, white 0%, #eeeeee 50%);
+ border-left: 1px solid #BBB;
+ display: block;
+ height: 100%;
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 18px;
+}
+/* line 53, sass/chosen.scss */
+div.chzn-container a.chzn-single div b {
+ background: url('chosen-arrows.png') no-repeat left center;
+ display: block;
+ width: 100%;
+ height: 100%;
+}
+/* line 62, sass/chosen.scss */
div.chzn-container div.chzn-search {
padding: 4px 3px;
+ margin: 0px;
+ white-space: nowrap;
}
-/* line 38, sass/chosen.scss */
+/* line 66, sass/chosen.scss */
div.chzn-container div.chzn-search input {
padding: 0 3px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
+ -o-border-radius: 0px;
+ -ms-border-radius: 0px;
+ -khtml-border-radius: 0px;
border-radius: 0px;
+ color: #666;
+ background: transparent !important;
+ padding: 5px;
+ margin: 1px 0;
+ outline: 0;
}
-/* line 46, sass/chosen.scss */
+/* line 78, sass/chosen.scss */
div.chzn-container ul.chzn-choices {
background: #fff;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
@@ -73,44 +141,42 @@ div.chzn-container ul.chzn-choices {
-webkit-border-radius: 3px;
border-radius: 3px;
}
-/* line 61, sass/chosen.scss */
+/* line 93, sass/chosen.scss */
div.chzn-container ul.chzn-choices:focus {
border-color: #058cf5;
-moz-box-shadow: 0px 0px 5px #999;
-webkit-box-shadow: 0px 0px 5px #999;
box-shadow: 0px 0px 5px #999;
}
-/* line 67, sass/chosen.scss */
+/* line 99, sass/chosen.scss */
div.chzn-container ul.chzn-choices li {
float: left;
list-style-type: none;
margin: 0px;
}
-/* line 71, sass/chosen.scss */
+/* line 103, sass/chosen.scss */
div.chzn-container ul.chzn-choices li.search-field {
margin: 0px;
white-space: nowrap;
padding: 0px;
}
-/* line 75, sass/chosen.scss */
+/* line 107, sass/chosen.scss */
div.chzn-container ul.chzn-choices li.search-field input {
color: #666;
- width: 90px !important;
background: transparent !important;
border: 0px !important;
- line-height: 26px;
+ padding: 5px;
margin: 1px 0;
outline: 0;
- padding: 0px 5px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
-/* line 87, sass/chosen.scss */
+/* line 118, sass/chosen.scss */
div.chzn-container ul.chzn-choices li.search-field input.default {
color: #999;
}
-/* line 92, sass/chosen.scss */
+/* line 123, sass/chosen.scss */
div.chzn-container ul.chzn-choices li.search-choice {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
@@ -121,21 +187,21 @@ div.chzn-container ul.chzn-choices li.search-choice {
color: #333;
border: 1px solid #b3c9db;
font-weight: bold;
- padding: 2px 18px 2px 6px;
+ line-height: 13px;
+ padding: 3px 18px 3px 6px;
position: relative;
margin: 3px 0px 3px 5px;
- line-height: 15px;
text-shadow: 0px 1px 0px #e9f2fa;
}
-/* line 107, sass/chosen.scss */
+/* line 138, sass/chosen.scss */
div.chzn-container ul.chzn-choices li.search-choice span {
cursor: default;
}
-/* line 110, sass/chosen.scss */
+/* line 141, sass/chosen.scss */
div.chzn-container ul.chzn-choices li.search-choice.search-choice-focus {
background: #DDD;
}
-/* line 113, sass/chosen.scss */
+/* line 144, sass/chosen.scss */
div.chzn-container ul.chzn-choices li.search-choice a.search-choice-close {
position: absolute;
right: 4px;
@@ -144,13 +210,13 @@ div.chzn-container ul.chzn-choices li.search-choice a.search-choice-close {
width: 8px;
height: 9px;
font-size: 1px;
- background: url(/images/close.png) no-repeat;
+ background: url(chosen-close.png) no-repeat;
}
-/* line 122, sass/chosen.scss */
+/* line 153, sass/chosen.scss */
div.chzn-container ul.chzn-choices li.search-choice a.search-choice-close:hover {
background-position: 0 -9px;
}
-/* line 130, sass/chosen.scss */
+/* line 161, sass/chosen.scss */
div.chzn-container ul.chzn-results {
margin: 0;
max-height: 196px;
@@ -160,62 +226,67 @@ div.chzn-container ul.chzn-results {
overflow-y: auto;
z-index: 20;
}
-/* line 138, sass/chosen.scss */
+/* line 169, sass/chosen.scss */
div.chzn-container ul.chzn-results li {
padding: 7px 10px;
z-index: 22;
margin: 0;
list-style-type: none;
}
-/* line 143, sass/chosen.scss */
+/* line 174, sass/chosen.scss */
div.chzn-container ul.chzn-results li.active-result {
cursor: pointer;
}
-/* line 146, sass/chosen.scss */
+/* line 177, sass/chosen.scss */
div.chzn-container ul.chzn-results li em {
font-weight: bold;
font-style: normal;
background: #FEFFDC;
}
-/* line 151, sass/chosen.scss */
+/* line 182, sass/chosen.scss */
div.chzn-container ul.chzn-results li.highlighted {
background: #066bb9;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #066bb9), color-stop(0.5, #2482cb));
background-image: -moz-linear-gradient(center bottom, #066bb9 0%, #2482cb 70%);
color: #fff;
}
-/* line 156, sass/chosen.scss */
+/* line 187, sass/chosen.scss */
div.chzn-container ul.chzn-results li.highlighted em {
color: #066bb9;
}
-/* line 160, sass/chosen.scss */
+/* line 191, sass/chosen.scss */
div.chzn-container ul.chzn-results li.no-results {
background: #F4F4F4;
}
-/* line 163, sass/chosen.scss */
+/* line 194, sass/chosen.scss */
div.chzn-container ul.chzn-results li.group-result {
cursor: default;
color: #999;
font-weight: bold;
}
-/* line 168, sass/chosen.scss */
+/* line 199, sass/chosen.scss */
div.chzn-container ul.chzn-results li.group-option {
padding-left: 20px;
}
-/* line 186, sass/chosen.scss */
+/* line 213, sass/chosen.scss */
+div.chzn-container-multi div.chzn-drop li.result-selected {
+ display: none;
+}
+
+/* line 218, sass/chosen.scss */
div.chzn-container-active a.chzn-single {
border-color: #058cf5;
-moz-box-shadow: 0px 0px 5px #999;
-webkit-box-shadow: 0px 0px 5px #999;
box-shadow: 0px 0px 5px #999;
}
-/* line 192, sass/chosen.scss */
+/* line 224, sass/chosen.scss */
div.chzn-container-active a.chzn-single-with-drop {
border: 1px solid #BBB;
- border-width: 1px 1px 0;
+ border-width: 1px 1px 1px;
box-shadow: 0px 1px 0px #FFF inset;
- background: #000;
+ background: #EEE;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, white), color-stop(0.5, #eeeeee));
background-image: -moz-linear-gradient(center bottom, white 0%, #eeeeee 50%);
-webkit-border-bottom-left-radius: 0px;
@@ -225,7 +296,16 @@ div.chzn-container-active a.chzn-single-with-drop {
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
-/* line 206, sass/chosen.scss */
+/* line 237, sass/chosen.scss */
+div.chzn-container-active a.chzn-single-with-drop div {
+ background: transparent;
+ border-left: none;
+}
+/* line 240, sass/chosen.scss */
+div.chzn-container-active a.chzn-single-with-drop div b {
+ background-position: right center;
+}
+/* line 245, sass/chosen.scss */
div.chzn-container-active ul.chzn-choices {
z-index: 21;
border-color: #058cf5;
@@ -233,7 +313,7 @@ div.chzn-container-active ul.chzn-choices {
-webkit-box-shadow: 0px 0px 5px #999;
box-shadow: 0px 0px 5px #999;
}
-/* line 208, sass/chosen.scss */
+/* line 247, sass/chosen.scss */
div.chzn-container-active ul.chzn-choices input {
color: #111 !important;
}
diff --git a/chosen.proto.js b/chosen.proto.js
index e210134..ee59a6d 100644
--- a/chosen.proto.js
+++ b/chosen.proto.js
@@ -25,6 +25,7 @@ THE SOFTWARE.
*/
+var Chosen;
Chosen = Class.create();
Chosen.prototype = {
@@ -32,18 +33,18 @@ Chosen.prototype = {
active_field : false,
mouse_on_container : false,
+ results_showing: false,
+
result_highlighted : null,
result_single_selected : null,
choices: 0,
// HTML Templates
- single_temp : new Template('#{default}
'),
- multi_temp : new Template(''),
+ single_temp : new Template('#{default}
'),
+ multi_temp : new Template(''),
choice_temp : new Template('#{choice}'),
- group_temp : new Template('#{label}'),
- result_temp : new Template('#{result}'),
no_results_temp : new Template('No results match "#{terms}"'),
initialize: function(el){
@@ -64,11 +65,11 @@ Chosen.prototype = {
set_up_html: function(){
this.container_id = this.form_field.id + "_chzn";
- var f_width = (this.form_field.getStyle("width")) ? parseInt( this.form_field.getStyle("width"), 10 ) : this.form_field.getWidth();
+ this.f_width = (this.form_field.getStyle("width")) ? parseInt( this.form_field.getStyle("width"), 10 ) : this.form_field.getWidth();
var container_props = {
'id': this.container_id,
'class':'chzn-container',
- 'style':'width:'+ f_width +'px'
+ 'style':'width:'+ this.f_width +'px'
};
this.default_text = this.form_field.readAttribute('title') ? this.form_field.readAttribute('title') : this.default_text_default
@@ -82,13 +83,14 @@ Chosen.prototype = {
this.dropdown = this.container.down('div.chzn-drop');
var dd_top = this.container.getHeight();
- var dd_width = (f_width - get_side_border_padding(this.dropdown));
+ var dd_width = (this.f_width - get_side_border_padding(this.dropdown));
this.dropdown.setStyle({"width": dd_width + "px", "top": dd_top + "px"});
this.search_field = this.container.down('input');
this.search_results = this.container.down('ul.chzn-results');
-
+ this.search_field_scale();
+
this.search_no_results = this.container.down('li.no-results');
if( !this.is_multiple ){
@@ -104,7 +106,7 @@ Chosen.prototype = {
this.search_choices.observe("click", this.choices_click.bindAsEventListener(this));
}
- this.results_parse_field();
+ this.results_build();
},
register_observers: function(){
@@ -118,8 +120,12 @@ Chosen.prototype = {
this.search_field.observe("keydown", this.keydown_checker.bindAsEventListener(this));
this.set_tab_index();
+ this.search_results.observe("click", this.search_results_click.bindAsEventListener(this) );
+ this.search_results.observe("mouseover", this.search_results_mouseover.bindAsEventListener(this) );
+ this.search_results.observe("mouseout", this.search_results_mouseout.bindAsEventListener(this) );
+
if( !this.is_multiple ){ this.selected_item.observe("focus", this.input_focus.bindAsEventListener(this)); }
- else{ this.search_field.observe("focus", this.input_focus.bindAsEventListener(this)); }
+ this.search_field.observe("focus", this.input_focus.bindAsEventListener(this));
},
set_tab_index: function(el){
@@ -153,18 +159,18 @@ Chosen.prototype = {
mouse_leave: function(){ this.mouse_on_container = false; },
input_focus: function(evt){
- if(!this.active_field){ setTimeout( this.container_click.bind(this) , 100 ); }
+ if(!this.active_field){ setTimeout( this.container_click.bind(this) , 50 ); }
},
input_blur: function(evt){
if( !this.mouse_on_container ){
this.active_field = false;
- setTimeout( this.blur_test.bind(this) , 150 );
+ setTimeout( this.blur_test.bind(this) , 100 );
}
},
blur_test: function(evt){
- if( !this.active_field ){ this.close_field(); }
+ if( !this.active_field && this.container.hasClassName("chzn-container-active") ){ this.close_field(); }
},
test_active_click: function(evt){
@@ -173,6 +179,10 @@ Chosen.prototype = {
},
close_field: function(){
+ document.stopObserving("click", this.click_test_action);
+
+ if( !this.is_multiple ){ this.selected_item.tabIndex = this.search_field.tabIndex; }
+
this.active_field = false;
this.results_hide();
@@ -180,20 +190,49 @@ Chosen.prototype = {
this.winnow_results_clear();
this.clear_backstroke();
- if( this.is_multiple && this.choices < 1 ){
+ this.show_search_field_default();
+ this.search_field_scale();
+ },
+
+ show_search_field_default: function(){
+ if( this.is_multiple && this.choices < 1 && !this.active_field ){
this.search_field.value = this.default_text;
this.search_field.addClassName("default");
}
+ else{
+ this.search_field.value = "";
+ this.search_field.removeClassName("default");
+ }
},
+ search_results_click: function(evt){
+ var target = (evt.target.hasClassName("active-result")) ? evt.target : evt.target.up(".active-result");
+ if( target ){
+ this.result_highlight = target;
+ this.result_select();
+ }
+ },
+
+ search_results_mouseover: function(evt){
+ var target = (evt.target.hasClassName("active-result")) ? evt.target : evt.target.up(".active-result");
+ if( target ){ this.result_do_highlight( target ); }
+ },
+
+ search_results_mouseout: function(evt){
+ if( evt.target.hasClassName('active-result') || evt.target.up('.active-result') ){ this.result_clear_highlight(); }
+ },
+
results_show: function(){
if( !this.is_multiple ){
this.selected_item.addClassName('chzn-single-with-drop');
if( this.result_single_selected ){ this.result_do_highlight( this.result_single_selected ); }
}
- this.dropdown.setStyle({"top": this.container.getHeight() + "px"});
- this.dropdown.show();
+ var dd_top = (this.is_multiple) ? this.container.getHeight() : this.container.getHeight() - 1;
+ this.dropdown.setStyle({"top": dd_top + "px", "left":0});
+ this.results_showing = true;
+
+ if( !this.is_multiple ){ this.selected_item.tabIndex = -1; }
this.search_field.focus();
this.search_field.value = this.search_field.value;
@@ -204,7 +243,7 @@ Chosen.prototype = {
results_toggle: function(evt){
evt.preventDefault();
if( this.active_field ){
- if( this.dropdown.visible() ){ this.results_hide(); }
+ if( this.results_showing ){ this.results_hide(); }
else{ this.results_show(); }
}
},
@@ -212,67 +251,62 @@ Chosen.prototype = {
results_hide: function(){
if( !this.is_multiple ){ this.selected_item.removeClassName('chzn-single-with-drop'); }
this.result_clear_highlight();
- this.dropdown.hide();
+ this.dropdown.setStyle({"left":"-9000px"});
+ this.results_showing = false;
},
results_build: function(){
- this.choices = 0;
- var data = this.results_data;
-
- var i;
- for( i = 0; i 0 ){
+ this.search_choices.select("li.search-choice").invoke("remove");
+ this.choices = 0;
+ }
+
+ var i, content='';
+ for( i = 0; i' + group.label.escapeHTML() + '';
}
+ else{ return ""; }
},
result_add_option: function(option){
if( !option.disabled ){
option.dom_id = (this.form_field.id + "chzn_o_" + option.id);
- this.search_results.insert( this.result_temp.evaluate({"id":option.dom_id,"result":option.text}) );
-
- var result = $(option.dom_id);
+
+ var classes = ( option.selected && this.is_multiple ) ? [] : ["active-result"];
+ if( option.selected ){ classes.push("result-selected"); }
+ if( option.group_id >= 0 ){ classes.push("group-option"); }
- if( option.selected ){
- this.result_do_highlight( result );
- this.result_select();
- }
-
- if( option.group_id >= 0 ){ result.addClassName("group-option"); }
-
- result.observe('click',this.result_click.bindAsEventListener(this));
- result.observe('mouseover',this.result_over.bindAsEventListener(this));
- result.observe('mouseout', this.result_clear_highlight.bindAsEventListener(this));
+ return '' + option.text.escapeHTML() + '';
}
- },
-
- result_over: function(evt){
- this.result_do_highlight( (evt.target.hasClassName("active-result")) ? evt.target : evt.target.up(".active-result") );
+ else{ return ""; }
},
result_do_highlight: function(el){
@@ -298,14 +332,8 @@ Chosen.prototype = {
}
},
- result_click: function(evt){
- this.result_highlight = (evt.target.hasClassName("active-result")) ? evt.target : evt.target.up(".active-result");
- this.result_select();
- },
-
result_select: function(){
if(this.result_highlight){
-
var high = this.result_highlight;
this.result_clear_highlight();
@@ -315,18 +343,20 @@ Chosen.prototype = {
var position = high.id.substr( high.id.lastIndexOf("_") + 1 );
var item = this.results_data[position];
+ item.selected = true;
+
this.form_field.options[item.select_index].selected = true;
if( this.is_multiple ){ this.choice_build( item ); }
- else { this.selected_item.innerHTML = item.text; }
+ else { this.selected_item.down("span").update(item.text); }
+
this.results_hide();
-
- if(!this.parsing){ this.winnow_results(); }
-
this.search_field.value = "";
if(typeof Event.simulate === 'function'){ this.form_field.simulate("change"); }
+
+ this.search_field_scale();
}
},
@@ -340,6 +370,8 @@ Chosen.prototype = {
result_deselect: function(pos){
var result_data = this.results_data[pos];
+ result_data.selected = false;
+
this.form_field.options[result_data.select_index].selected = false;
var result = $(this.form_field.id + "chzn_o_" + pos);
result.removeClassName("result-selected").addClassName("active-result").show();
@@ -348,37 +380,41 @@ Chosen.prototype = {
this.winnow_results();
if(typeof Event.simulate === 'function'){ this.form_field.simulate("change"); }
+
+ this.search_field_scale();
},
results_search: function(){
- if( !this.dropdown.visible() ){ this.results_show(); }
+ if( !this.results_showing ){ this.results_show(); }
else{ this.winnow_results(); }
},
winnow_results: function(){
+ var startTime = new Date();
this.no_results_clear();
var results = 0;
var searchText = (this.search_field.value == this.default_text) ? "" : this.search_field.value.strip();
var regex = new RegExp('^' + searchText.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"), 'i');
+ var zregex = new RegExp(searchText.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"), 'i');
- // SPOT
var i;
for( i = 0; i= 0){
- var parts = option.text.split(" ");
+ else if( option.text.indexOf(" ") >= 0 || option.text.indexOf("[") == 0){
+ // TODO: replace this substitution of /\[\]/ with a list of characters to skip.
+ var parts = option.text.replace(/\[|\]/g, "").split(" ");
if( parts.length ){
var j;
for( j = 0; j' + option.text.substr(startpos + searchText.length);
+ text = text.substr(0,startpos) + '' + text.substr(startpos);
+ }
+ else{ text = option.text; }
- var text = option.text.substr(0,startpos + searchText.length) + '' + option.text.substr(startpos + searchText.length);
- text = text.substr(0,startpos) + '' + text.substr(startpos);
-
- $(result_id).innerHTML = text;
+ if( $(result_id).innerHTML !== text ){ $(result_id).update( text ); }
this.result_activate( $(result_id) );
@@ -443,7 +481,7 @@ Chosen.prototype = {
choices_click: function(evt){
evt.preventDefault();
- if( this.active_field && !(evt.target.hasClassName('search-choice') || evt.target.up('.search-choice')) && !this.dropdown.visible() ){ this.results_show(); }
+ if( this.active_field && !(evt.target.hasClassName('search-choice') || evt.target.up('.search-choice')) && !this.results_showing ){ this.results_show(); }
},
choice_build: function(item){
@@ -462,30 +500,57 @@ Chosen.prototype = {
choice_destroy: function(link){
this.choices -= 1;
+ this.show_search_field_default();
if( this.is_multiple && this.choices > 0 && this.search_field.value.length < 1 ){ this.results_hide(); }
this.result_deselect(link.readAttribute("rel"));
link.up('li').remove();
+ },
+
+ search_field_scale: function(){
+ if(this.is_multiple){
+ var input = this.search_field;
- if( this.choices < 1 ){ this.close_field(); }
+ var h = 0, w = 0;
+
+ var style_block = "position:absolute; left: -1000px; top: -1000px; display:none;";
+ var styles = ['font-size','font-style', 'font-weight', 'font-family','line-height', 'text-transform', 'letter-spacing'];
+ styles.each(function(style){ style_block += style + ":" + input.getStyle(style) + ";"});
+
+ var div = new Element('div', { 'style' : style_block }).update(input.value);
+ document.body.appendChild(div);
+
+ console.log( Element.measure(div, 'width') );
+ w = Element.measure(div, 'width') + 25;
+ div.remove();
+
+ if( w > this.f_width-10 ){ w = this.f_width - 10; }
+ this.search_field.setStyle({'width':w + 'px'});
+
+ var dd_top = this.container.getHeight();
+ this.dropdown.setStyle({"top": dd_top + "px"});
+ }
},
keydown_arrow: function(){
var actives = this.search_results.select("li.active-result");
if( actives.length ){
if( !this.result_highlight ){ this.result_do_highlight( actives.first() ); }
- else if( this.dropdown.visible() ){
+ else if( this.results_showing ){
var sibs = this.result_highlight.nextSiblings();
var nexts = sibs.intersect(actives);
if( nexts.length ){ this.result_do_highlight(nexts.first()); }
}
- if( !this.dropdown.visible() ){ this.results_show(); }
+ if( !this.results_showing ){ this.results_show(); }
}
},
keyup_arrow: function(){
- if( this.result_highlight ){
+ if( !this.results_showing && !this.is_multiple ){
+ this.results_show();
+ }
+ else if( this.result_highlight ){
var sibs = this.result_highlight.previousSiblings();
var actives = this.search_results.select("li.active-result");
var prevs = sibs.intersect(actives);
@@ -501,7 +566,7 @@ Chosen.prototype = {
keydown_backstroke: function(){
if( this.pending_backstroke ){
this.choice_destroy( this.pending_backstroke.down("a") );
- this.clear_backstroke();
+ this.clear_backstroke();
}
else{
this.pending_backstroke = this.search_container.siblings("li.search-choice").last();
@@ -516,6 +581,7 @@ Chosen.prototype = {
keyup_checker: function(evt){
var stroke = evt.which || evt.keyCode;
+ this.search_field_scale();
switch(stroke){
case 8:
@@ -524,7 +590,7 @@ Chosen.prototype = {
break;
case 13:
evt.preventDefault();
- if( this.dropdown.visible() ){ this.result_select(); }
+ if( this.results_showing ){ this.result_select(); }
break;
case 9:
case 13:
@@ -539,6 +605,7 @@ Chosen.prototype = {
keydown_checker: function(evt){
var stroke = evt.which || evt.keyCode;
+ this.search_field_scale();
if(stroke !== 8 && this.pending_backstroke) this.clear_backstroke();
@@ -569,7 +636,7 @@ var get_side_border_padding = function(item){
}
var select_to_array = {
- parse: function(select){
+ parse: function(select) {
var children = select.children;
var opt_array = [];
@@ -578,7 +645,7 @@ var select_to_array = {
var i;
- for( i = 0; i
+`
+
-
-
+
+
Chosen
+
Chosen is a javsacript plug-in for Prototype (jQuery support coming soon) that makes long, unwieldy select boxes much more user-friendly.
+
+
Standard Select
+
+
+ Turns This
+
+
+
+ Into This
+
+
+
+
+
Multiple Select
+
+
+ Turns This
+
+
+
+ Into This
+
+
+
+
+
Why use Chosen?
+
+ -
+
Easier to Use
+ Instead of forcing your users to scroll through a giant list of items, they can just start typing the name of the item they were looking for.
+
+ -
+
Progressive Enhancement
+ Because chosen replaces normal html select fields, you don't need to do anything special to make it work for browsers without javascript.
+
+ -
+
Lightweight
+ Even un-minified, Chosen's JS, CSS and Images weigh in at under 50k.
+
+ -
+
Painless Setup
+ Add Chosen's files to your app and then add the class chzn-select to your select box. That's it, you're done!
+
+
+
+
Setup
+
Using Chosen is easy as can be.
+
+ - Download the plug-in and copy the related files to your app.
+ - Add the class chzn-select to any select box.
+ - Disco.
+
+
+
FAQs
+
+ -
+ Why did you build this built for Prototype?
+
+ -
+ What browsers are supported?
+
+
\ No newline at end of file