deac/chosen
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Chosen docs.

Browse source
This commit is contained in:
Patrick Filler 2011-06-22 17:28:19 -04:00
parent 04963d1621
commit c8fba739ec
5 changed files with 1370 additions and 624 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
chosen-arrows.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 258 B

BIN
chosen-close.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

174
chosen.css
View file

@ -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 { 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; border: 1px solid #aaa;
font-family: sans-serif; font-family: sans-serif;
font-size: 1em; font-size: 1em;
margin: 0px; margin: 0px;
padding: 5px; padding: 4px 5px;
width: 90%;
outline: none; outline: none;
-moz-border-radius: 3px; -moz-border-radius: 3px;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-khtml-border-radius: 3px;
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; border-color: #058cf5;
-moz-box-shadow: 0px 0px 5px #999; -moz-box-shadow: 0px 0px 5px #999;
-webkit-box-shadow: 0px 0px 5px #999; -webkit-box-shadow: 0px 0px 5px #999;
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 { div.chzn-container a.chzn-single {
background: #FFF; background: #FFF;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white)); 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; overflow: hidden;
-moz-border-radius: 3px; -moz-border-radius: 3px;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
height: 28px; height: 28px;
color: #666; color: #666;
line-height: 28px; line-height: 28px;
padding: 0px 8px; padding: 0px 0px 0px 8px;
position: relative; position: relative;
text-decoration: none; text-decoration: none;
z-index: 19; 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 { div.chzn-container div.chzn-search {
padding: 4px 3px; 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 { div.chzn-container div.chzn-search input {
padding: 0 3px; padding: 0 3px;
-moz-border-radius: 0px; -moz-border-radius: 0px;
-webkit-border-radius: 0px; -webkit-border-radius: 0px;
-o-border-radius: 0px;
-ms-border-radius: 0px;
-khtml-border-radius: 0px;
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 { div.chzn-container ul.chzn-choices {
background: #fff; background: #fff;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee)); 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; -webkit-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
} }
/* line 61, sass/chosen.scss */ /* line 93, sass/chosen.scss */
div.chzn-container ul.chzn-choices:focus { div.chzn-container ul.chzn-choices:focus {
border-color: #058cf5; border-color: #058cf5;
-moz-box-shadow: 0px 0px 5px #999; -moz-box-shadow: 0px 0px 5px #999;
-webkit-box-shadow: 0px 0px 5px #999; -webkit-box-shadow: 0px 0px 5px #999;
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 { div.chzn-container ul.chzn-choices li {
float: left; float: left;
list-style-type: none; list-style-type: none;
margin: 0px; margin: 0px;
} }
/* line 71, sass/chosen.scss */ /* line 103, sass/chosen.scss */
div.chzn-container ul.chzn-choices li.search-field { div.chzn-container ul.chzn-choices li.search-field {
margin: 0px; margin: 0px;
white-space: nowrap; white-space: nowrap;
padding: 0px; padding: 0px;
} }
/* line 75, sass/chosen.scss */ /* line 107, sass/chosen.scss */
div.chzn-container ul.chzn-choices li.search-field input { div.chzn-container ul.chzn-choices li.search-field input {
color: #666; color: #666;
width: 90px !important;
background: transparent !important; background: transparent !important;
border: 0px !important; border: 0px !important;
line-height: 26px; padding: 5px;
margin: 1px 0; margin: 1px 0;
outline: 0; outline: 0;
padding: 0px 5px;
-webkit-box-shadow: none; -webkit-box-shadow: none;
-moz-box-shadow: none; -moz-box-shadow: none;
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 { div.chzn-container ul.chzn-choices li.search-field input.default {
color: #999; color: #999;
} }
/* line 92, sass/chosen.scss */ /* line 123, sass/chosen.scss */
div.chzn-container ul.chzn-choices li.search-choice { div.chzn-container ul.chzn-choices li.search-choice {
-moz-border-radius: 3px; -moz-border-radius: 3px;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
@ -121,21 +187,21 @@ div.chzn-container ul.chzn-choices li.search-choice {
color: #333; color: #333;
border: 1px solid #b3c9db; border: 1px solid #b3c9db;
font-weight: bold; font-weight: bold;
padding: 2px 18px 2px 6px; line-height: 13px;
padding: 3px 18px 3px 6px;
position: relative; position: relative;
margin: 3px 0px 3px 5px; margin: 3px 0px 3px 5px;
line-height: 15px;
text-shadow: 0px 1px 0px #e9f2fa; 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 { div.chzn-container ul.chzn-choices li.search-choice span {
cursor: default; cursor: default;
} }
/* line 110, sass/chosen.scss */ /* line 141, sass/chosen.scss */
div.chzn-container ul.chzn-choices li.search-choice.search-choice-focus { div.chzn-container ul.chzn-choices li.search-choice.search-choice-focus {
background: #DDD; 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 { div.chzn-container ul.chzn-choices li.search-choice a.search-choice-close {
position: absolute; position: absolute;
right: 4px; right: 4px;
@ -144,13 +210,13 @@ div.chzn-container ul.chzn-choices li.search-choice a.search-choice-close {
width: 8px; width: 8px;
height: 9px; height: 9px;
font-size: 1px; 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 { div.chzn-container ul.chzn-choices li.search-choice a.search-choice-close:hover {
background-position: 0 -9px; background-position: 0 -9px;
} }
/* line 130, sass/chosen.scss */ /* line 161, sass/chosen.scss */
div.chzn-container ul.chzn-results { div.chzn-container ul.chzn-results {
margin: 0; margin: 0;
max-height: 196px; max-height: 196px;
@ -160,62 +226,67 @@ div.chzn-container ul.chzn-results {
overflow-y: auto; overflow-y: auto;
z-index: 20; z-index: 20;
} }
/* line 138, sass/chosen.scss */ /* line 169, sass/chosen.scss */
div.chzn-container ul.chzn-results li { div.chzn-container ul.chzn-results li {
padding: 7px 10px; padding: 7px 10px;
z-index: 22; z-index: 22;
margin: 0; margin: 0;
list-style-type: none; list-style-type: none;
} }
/* line 143, sass/chosen.scss */ /* line 174, sass/chosen.scss */
div.chzn-container ul.chzn-results li.active-result { div.chzn-container ul.chzn-results li.active-result {
cursor: pointer; cursor: pointer;
} }
/* line 146, sass/chosen.scss */ /* line 177, sass/chosen.scss */
div.chzn-container ul.chzn-results li em { div.chzn-container ul.chzn-results li em {
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
background: #FEFFDC; background: #FEFFDC;
} }
/* line 151, sass/chosen.scss */ /* line 182, sass/chosen.scss */
div.chzn-container ul.chzn-results li.highlighted { div.chzn-container ul.chzn-results li.highlighted {
background: #066bb9; background: #066bb9;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #066bb9), color-stop(0.5, #2482cb)); 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%); background-image: -moz-linear-gradient(center bottom, #066bb9 0%, #2482cb 70%);
color: #fff; color: #fff;
} }
/* line 156, sass/chosen.scss */ /* line 187, sass/chosen.scss */
div.chzn-container ul.chzn-results li.highlighted em { div.chzn-container ul.chzn-results li.highlighted em {
color: #066bb9; color: #066bb9;
} }
/* line 160, sass/chosen.scss */ /* line 191, sass/chosen.scss */
div.chzn-container ul.chzn-results li.no-results { div.chzn-container ul.chzn-results li.no-results {
background: #F4F4F4; background: #F4F4F4;
} }
/* line 163, sass/chosen.scss */ /* line 194, sass/chosen.scss */
div.chzn-container ul.chzn-results li.group-result { div.chzn-container ul.chzn-results li.group-result {
cursor: default; cursor: default;
color: #999; color: #999;
font-weight: bold; font-weight: bold;
} }
/* line 168, sass/chosen.scss */ /* line 199, sass/chosen.scss */
div.chzn-container ul.chzn-results li.group-option { div.chzn-container ul.chzn-results li.group-option {
padding-left: 20px; 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 { div.chzn-container-active a.chzn-single {
border-color: #058cf5; border-color: #058cf5;
-moz-box-shadow: 0px 0px 5px #999; -moz-box-shadow: 0px 0px 5px #999;
-webkit-box-shadow: 0px 0px 5px #999; -webkit-box-shadow: 0px 0px 5px #999;
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 { div.chzn-container-active a.chzn-single-with-drop {
border: 1px solid #BBB; border: 1px solid #BBB;
border-width: 1px 1px 0; border-width: 1px 1px 1px;
box-shadow: 0px 1px 0px #FFF inset; 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: -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%); background-image: -moz-linear-gradient(center bottom, white 0%, #eeeeee 50%);
-webkit-border-bottom-left-radius: 0px; -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-left-radius: 0px;
border-bottom-right-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 { div.chzn-container-active ul.chzn-choices {
z-index: 21; z-index: 21;
border-color: #058cf5; border-color: #058cf5;
@ -233,7 +313,7 @@ div.chzn-container-active ul.chzn-choices {
-webkit-box-shadow: 0px 0px 5px #999; -webkit-box-shadow: 0px 0px 5px #999;
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 { div.chzn-container-active ul.chzn-choices input {
color: #111 !important; color: #111 !important;
} }

224
chosen.proto.js
View file

@ -25,6 +25,7 @@ THE SOFTWARE.
*/ */
var Chosen;
Chosen = Class.create(); Chosen = Class.create();
Chosen.prototype = { Chosen.prototype = {
@ -32,18 +33,18 @@ Chosen.prototype = {
active_field : false, active_field : false,
mouse_on_container : false, mouse_on_container : false,
results_showing: false,
result_highlighted : null, result_highlighted : null,
result_single_selected : null, result_single_selected : null,
choices: 0, choices: 0,
// HTML Templates // HTML Templates
single_temp : new Template('<a href="#" class="chzn-single">#{default}</a><div class="chzn-drop" style="display:none;"><div class="chzn-search"><input type="text" /></div><ul class="chzn-results"></ul></div>'), single_temp : new Template('<a href="#" class="chzn-single"><span>#{default}</span><div><b></b></div></a><div class="chzn-drop" style="left:-9000px;"><div class="chzn-search"><input type="text" /></div><ul class="chzn-results"></ul></div>'),
multi_temp : new Template('<ul class="chzn-choices"><li class="search-field"><input type="text" value="#{default}" class="default" /></li></ul><div class="chzn-drop" style="display:none;"><ul class="chzn-results"></ul></div>'), multi_temp : new Template('<ul class="chzn-choices"><li class="search-field"><input type="text" value="#{default}" class="default" style="width:25px;" /></li></ul><div class="chzn-drop" style="left:-9000px;"><ul class="chzn-results"></ul></div>'),
choice_temp : new Template('<li class="search-choice" id="#{id}"><span>#{choice}</span><a href="#" class="search-choice-close" rel="#{position}"></a></li>'), choice_temp : new Template('<li class="search-choice" id="#{id}"><span>#{choice}</span><a href="#" class="search-choice-close" rel="#{position}"></a></li>'),
group_temp : new Template('<li id="#{id}" class="group-result" style="display:none;">#{label}</li>'),
result_temp : new Template('<li id="#{id}" class="active-result">#{result}</li>'),
no_results_temp : new Template('<li class="no-results">No results match "<span>#{terms}</span>"</li>'), no_results_temp : new Template('<li class="no-results">No results match "<span>#{terms}</span>"</li>'),
initialize: function(el){ initialize: function(el){
@ -64,11 +65,11 @@ Chosen.prototype = {
set_up_html: function(){ set_up_html: function(){
this.container_id = this.form_field.id + "_chzn"; 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 = { var container_props = {
'id': this.container_id, 'id': this.container_id,
'class':'chzn-container', '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 this.default_text = this.form_field.readAttribute('title') ? this.form_field.readAttribute('title') : this.default_text_default
@ -82,12 +83,13 @@ Chosen.prototype = {
this.dropdown = this.container.down('div.chzn-drop'); this.dropdown = this.container.down('div.chzn-drop');
var dd_top = this.container.getHeight(); 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.dropdown.setStyle({"width": dd_width + "px", "top": dd_top + "px"});
this.search_field = this.container.down('input'); this.search_field = this.container.down('input');
this.search_results = this.container.down('ul.chzn-results'); this.search_results = this.container.down('ul.chzn-results');
this.search_field_scale();
this.search_no_results = this.container.down('li.no-results'); this.search_no_results = this.container.down('li.no-results');
@ -104,7 +106,7 @@ Chosen.prototype = {
this.search_choices.observe("click", this.choices_click.bindAsEventListener(this)); this.search_choices.observe("click", this.choices_click.bindAsEventListener(this));
} }
this.results_parse_field(); this.results_build();
}, },
register_observers: function(){ register_observers: function(){
@ -118,8 +120,12 @@ Chosen.prototype = {
this.search_field.observe("keydown", this.keydown_checker.bindAsEventListener(this)); this.search_field.observe("keydown", this.keydown_checker.bindAsEventListener(this));
this.set_tab_index(); 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)); } 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){ set_tab_index: function(el){
@ -153,18 +159,18 @@ Chosen.prototype = {
mouse_leave: function(){ this.mouse_on_container = false; }, mouse_leave: function(){ this.mouse_on_container = false; },
input_focus: function(evt){ 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){ input_blur: function(evt){
if( !this.mouse_on_container ){ if( !this.mouse_on_container ){
this.active_field = false; this.active_field = false;
setTimeout( this.blur_test.bind(this) , 150 ); setTimeout( this.blur_test.bind(this) , 100 );
} }
}, },
blur_test: function(evt){ 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){ test_active_click: function(evt){
@ -173,6 +179,10 @@ Chosen.prototype = {
}, },
close_field: function(){ 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.active_field = false;
this.results_hide(); this.results_hide();
@ -180,10 +190,36 @@ Chosen.prototype = {
this.winnow_results_clear(); this.winnow_results_clear();
this.clear_backstroke(); 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.value = this.default_text;
this.search_field.addClassName("default"); 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(){ results_show: function(){
@ -192,8 +228,11 @@ Chosen.prototype = {
if( this.result_single_selected ){ this.result_do_highlight( this.result_single_selected ); } if( this.result_single_selected ){ this.result_do_highlight( this.result_single_selected ); }
} }
this.dropdown.setStyle({"top": this.container.getHeight() + "px"}); var dd_top = (this.is_multiple) ? this.container.getHeight() : this.container.getHeight() - 1;
this.dropdown.show(); 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.focus();
this.search_field.value = this.search_field.value; this.search_field.value = this.search_field.value;
@ -204,7 +243,7 @@ Chosen.prototype = {
results_toggle: function(evt){ results_toggle: function(evt){
evt.preventDefault(); evt.preventDefault();
if( this.active_field ){ if( this.active_field ){
if( this.dropdown.visible() ){ this.results_hide(); } if( this.results_showing ){ this.results_hide(); }
else{ this.results_show(); } else{ this.results_show(); }
} }
}, },
@ -212,67 +251,62 @@ Chosen.prototype = {
results_hide: function(){ results_hide: function(){
if( !this.is_multiple ){ this.selected_item.removeClassName('chzn-single-with-drop'); } if( !this.is_multiple ){ this.selected_item.removeClassName('chzn-single-with-drop'); }
this.result_clear_highlight(); this.result_clear_highlight();
this.dropdown.hide(); this.dropdown.setStyle({"left":"-9000px"});
this.results_showing = false;
}, },
results_build: function(){ results_build: function(){
this.choices = 0; // TODO remove debugging
var data = this.results_data; var startTime = new Date();
var i; this.parsing = true;
for( i = 0; i<data.length; i++){ this.results_data = select_to_array.parse( this.form_field );
if( data[i].group ){ this.result_add_group( data[i] ); }
else{ this.result_add_option( data[i] ); } if( this.is_multiple && this.choices > 0 ){
this.search_choices.select("li.search-choice").invoke("remove");
this.choices = 0;
} }
var i, content='';
for( i = 0; i<this.results_data.length; i++){
if( this.results_data[i].group ){ content += this.result_add_group( this.results_data[i] ); }
else{
content += this.result_add_option( this.results_data[i] );
if( this.results_data[i].selected ){
if( this.is_multiple ){ this.choice_build( this.results_data[i] ); }
else { this.selected_item.down("span").update(this.results_data[i].text); }
}
}
}
this.show_search_field_default();
this.search_results.update( content );
this.parsing = false; this.parsing = false;
this.winnow_results();
},
results_parse_field: function(){
this.parsing = true;
if( this.search_results.select("li").length ){ this.search_results.update(""); }
if( this.is_multiple && this.search_choices.select("li.search-choice").length ){ this.search_choices.select("li.search-choice").invoke("remove"); }
this.results_data = select_to_array.parse( this.form_field );
this.results_build();
}, },
results_update_field: function(){ results_update_field: function(){
this.result_clear_highlight(); this.result_clear_highlight();
this.results_parse_field(); this.results_build();
}, },
result_add_group: function(group){ result_add_group: function(group){
if( !group.disabled ){ if( !group.disabled ){
group.dom_id = this.form_field.id + "chzn_g_" + group.id; group.dom_id = this.form_field.id + "chzn_g_" + group.id;
this.search_results.insert( this.group_temp.evaluate({"id":group.dom_id, "label":group.label}) ); return '<li id="' + group.dom_id + '" class="group-result">' + group.label.escapeHTML() + '</li>';
} }
else{ return ""; }
}, },
result_add_option: function(option){ result_add_option: function(option){
if( !option.disabled ){ if( !option.disabled ){
option.dom_id = (this.form_field.id + "chzn_o_" + option.id); 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 ){ return '<li id="' + option.dom_id + '" class="' + classes.join(' ') + '">' + option.text.escapeHTML() + '</li>';
this.result_do_highlight( result );
this.result_select();
} }
else{ return ""; }
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));
}
},
result_over: function(evt){
this.result_do_highlight( (evt.target.hasClassName("active-result")) ? evt.target : evt.target.up(".active-result") );
}, },
result_do_highlight: function(el){ 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(){ result_select: function(){
if(this.result_highlight){ if(this.result_highlight){
var high = this.result_highlight; var high = this.result_highlight;
this.result_clear_highlight(); this.result_clear_highlight();
@ -315,18 +343,20 @@ Chosen.prototype = {
var position = high.id.substr( high.id.lastIndexOf("_") + 1 ); var position = high.id.substr( high.id.lastIndexOf("_") + 1 );
var item = this.results_data[position]; var item = this.results_data[position];
item.selected = true;
this.form_field.options[item.select_index].selected = true; this.form_field.options[item.select_index].selected = true;
if( this.is_multiple ){ this.choice_build( item ); } 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(); this.results_hide();
if(!this.parsing){ this.winnow_results(); }
this.search_field.value = ""; this.search_field.value = "";
if(typeof Event.simulate === 'function'){ this.form_field.simulate("change"); } if(typeof Event.simulate === 'function'){ this.form_field.simulate("change"); }
this.search_field_scale();
} }
}, },
@ -340,6 +370,8 @@ Chosen.prototype = {
result_deselect: function(pos){ result_deselect: function(pos){
var result_data = this.results_data[pos]; var result_data = this.results_data[pos];
result_data.selected = false;
this.form_field.options[result_data.select_index].selected = false; this.form_field.options[result_data.select_index].selected = false;
var result = $(this.form_field.id + "chzn_o_" + pos); var result = $(this.form_field.id + "chzn_o_" + pos);
result.removeClassName("result-selected").addClassName("active-result").show(); result.removeClassName("result-selected").addClassName("active-result").show();
@ -348,37 +380,41 @@ Chosen.prototype = {
this.winnow_results(); this.winnow_results();
if(typeof Event.simulate === 'function'){ this.form_field.simulate("change"); } if(typeof Event.simulate === 'function'){ this.form_field.simulate("change"); }
this.search_field_scale();
}, },
results_search: function(){ results_search: function(){
if( !this.dropdown.visible() ){ this.results_show(); } if( !this.results_showing ){ this.results_show(); }
else{ this.winnow_results(); } else{ this.winnow_results(); }
}, },
winnow_results: function(){ winnow_results: function(){
var startTime = new Date();
this.no_results_clear(); this.no_results_clear();
var results = 0; var results = 0;
var searchText = (this.search_field.value == this.default_text) ? "" : this.search_field.value.strip(); var searchText = (this.search_field.value == this.default_text) ? "" : this.search_field.value.strip();
var regex = new RegExp('^' + searchText.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"), 'i'); var regex = new RegExp('^' + searchText.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"), 'i');
var zregex = new RegExp(searchText.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"), 'i');
// SPOT
var i; var i;
for( i = 0; i<this.results_data.length; i+=1 ){ for( i = 0; i<this.results_data.length; i+=1 ){
var option = this.results_data[i]; var option = this.results_data[i];
if(!option.disabled){ if(!option.disabled){
if(option.group){ $(option.dom_id).hide(); } if(option.group){ $(option.dom_id).hide(); }
else if(!(this.is_multiple && $(option.dom_id).hasClassName('result-selected'))){ else if(!(this.is_multiple && option.selected)){
var found = false; var found = false;
var result_id = this.form_field.id + "chzn_o_" + option.id; var result_id = this.form_field.id + "chzn_o_" + option.id;
if( regex.test( option.text ) ){ if( regex.test( option.text ) ){
found = true; results += 1; found = true; results += 1;
} }
else if( option.text.indexOf(" ") >= 0){ else if( option.text.indexOf(" ") >= 0 || option.text.indexOf("[") == 0){
var parts = option.text.split(" "); // TODO: replace this substitution of /\[\]/ with a list of characters to skip.
var parts = option.text.replace(/\[|\]/g, "").split(" ");
if( parts.length ){ if( parts.length ){
var j; var j;
for( j = 0; j<parts.length; j++){ for( j = 0; j<parts.length; j++){
@ -388,13 +424,15 @@ Chosen.prototype = {
} }
if( found ){ if( found ){
var zregex = new RegExp(searchText.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"), 'i'); var text;
if( searchText.length ){
var startpos = option.text.search( zregex ); var startpos = option.text.search( zregex );
text = option.text.substr(0,startpos + searchText.length) + '</em>' + option.text.substr(startpos + searchText.length);
var text = option.text.substr(0,startpos + searchText.length) + '</em>' + option.text.substr(startpos + searchText.length);
text = text.substr(0,startpos) + '<em>' + text.substr(startpos); text = text.substr(0,startpos) + '<em>' + text.substr(startpos);
}
else{ text = option.text; }
$(result_id).innerHTML = text; if( $(result_id).innerHTML !== text ){ $(result_id).update( text ); }
this.result_activate( $(result_id) ); this.result_activate( $(result_id) );
@ -443,7 +481,7 @@ Chosen.prototype = {
choices_click: function(evt){ choices_click: function(evt){
evt.preventDefault(); 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){ choice_build: function(item){
@ -462,30 +500,57 @@ Chosen.prototype = {
choice_destroy: function(link){ choice_destroy: function(link){
this.choices -= 1; this.choices -= 1;
this.show_search_field_default();
if( this.is_multiple && this.choices > 0 && this.search_field.value.length < 1 ){ this.results_hide(); } if( this.is_multiple && this.choices > 0 && this.search_field.value.length < 1 ){ this.results_hide(); }
this.result_deselect(link.readAttribute("rel")); this.result_deselect(link.readAttribute("rel"));
link.up('li').remove(); link.up('li').remove();
},
if( this.choices < 1 ){ this.close_field(); } search_field_scale: function(){
if(this.is_multiple){
var input = this.search_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(){ keydown_arrow: function(){
var actives = this.search_results.select("li.active-result"); var actives = this.search_results.select("li.active-result");
if( actives.length ){ if( actives.length ){
if( !this.result_highlight ){ this.result_do_highlight( actives.first() ); } 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 sibs = this.result_highlight.nextSiblings();
var nexts = sibs.intersect(actives); var nexts = sibs.intersect(actives);
if( nexts.length ){ this.result_do_highlight(nexts.first()); } 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(){ 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 sibs = this.result_highlight.previousSiblings();
var actives = this.search_results.select("li.active-result"); var actives = this.search_results.select("li.active-result");
var prevs = sibs.intersect(actives); var prevs = sibs.intersect(actives);
@ -516,6 +581,7 @@ Chosen.prototype = {
keyup_checker: function(evt){ keyup_checker: function(evt){
var stroke = evt.which || evt.keyCode; var stroke = evt.which || evt.keyCode;
this.search_field_scale();
switch(stroke){ switch(stroke){
case 8: case 8:
@ -524,7 +590,7 @@ Chosen.prototype = {
break; break;
case 13: case 13:
evt.preventDefault(); evt.preventDefault();
if( this.dropdown.visible() ){ this.result_select(); } if( this.results_showing ){ this.result_select(); }
break; break;
case 9: case 9:
case 13: case 13:
@ -539,6 +605,7 @@ Chosen.prototype = {
keydown_checker: function(evt){ keydown_checker: function(evt){
var stroke = evt.which || evt.keyCode; var stroke = evt.which || evt.keyCode;
this.search_field_scale();
if(stroke !== 8 && this.pending_backstroke) this.clear_backstroke(); if(stroke !== 8 && this.pending_backstroke) this.clear_backstroke();
@ -597,6 +664,9 @@ var select_to_array = {
opt_array.push( select_to_array.parse_option( children[i], opt_array.length, sel_index ) ); opt_array.push( select_to_array.parse_option( children[i], opt_array.length, sel_index ) );
sel_index += 1; sel_index += 1;
} }
else {
sel_index += 1;
}
} }
return opt_array; return opt_array;

600
index.html
View file

@ -1,9 +1,307 @@
<html> `<html>
<head> <head>
<style>
/* RESET */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, a,
font, img, dl, dt, dd, ol, ul, li, legend, table, tbody, tr, th, td
{margin:0px;padding:0px;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;list-style:none;}
a img {border: none;}
ol li {list-style: decimal outside;}
fieldset {border:0;padding:0;}
body { font-family: sans-serif; font-size: 1em; }
div#container { width: 780px; margin: 0 auto; padding: 1em 0; }
p { margin: 1em 0; max-width: 700px; }
h1 + p { margin-top: 0; }
h1, h2 { font-family: Georgia, Times, serif; }
h1 { font-size: 2em; margin-bottom: .75em; }
h2 { font-size: 1.5em; margin: 1em 0 .5em; border-bottom: 1px solid #999; padding-bottom: 5px; }
h3 { font-weight: bold; }
ul li { list-style: disc; margin-left: 1em; }
ol li { margin-left: 1.25em; }
div.side-by-side { width: 100%; margin-bottom: 1em; }
div.side-by-side > div { float: left; width: 50%; }
div.side-by-side > div > em { margin-bottom: 10px; display: block; }
.faqs em { display: block; }
.clearfix:after {
content: "\0020";
display: block;
height: 0;
clear: both;
overflow: hidden;
visibility: hidden;
}
footer {
margin-top: 2em;
border-top: 1px solid #666;
padding-top: 5px;
}
</style>
<link rel="stylesheet" href="chosen.css" /> <link rel="stylesheet" href="chosen.css" />
</head> </head>
<body> <body>
<div id="container">
<h1>Chosen</h1>
<p>Chosen is a javsacript plug-in for Prototype (jQuery support coming soon) that makes long, unwieldy select boxes much more user-friendly.</p>
<h2>Standard Select</h2>
<div class="side-by-side clearfix">
<div>
<em>Turns This</em>
<select title="Choose a Country" style="width:350px;" tabindex="1"> <select title="Choose a Country" style="width:350px;" tabindex="1">
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antarctica">Antarctica</option>
<option value="Antigua and Barbuda">Antigua and Barbuda</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Aruba">Aruba</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Azerbaijan">Azerbaijan</option>
<option value="Bahamas">Bahamas</option>
<option value="Bahrain">Bahrain</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Barbados">Barbados</option>
<option value="Belarus">Belarus</option>
<option value="Belgium">Belgium</option>
<option value="Belize">Belize</option>
<option value="Benin">Benin</option>
<option value="Bermuda">Bermuda</option>
<option value="Bhutan">Bhutan</option>
<option value="Bolivia">Bolivia</option>
<option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
<option value="Botswana">Botswana</option>
<option value="Bouvet Island">Bouvet Island</option>
<option value="Brazil">Brazil</option>
<option value="British Indian Ocean Territory">British Indian Ocean Territory</option>
<option value="Brunei Darussalam">Brunei Darussalam</option>
<option value="Bulgaria">Bulgaria</option>
<option value="Burkina Faso">Burkina Faso</option>
<option value="Burundi">Burundi</option>
<option value="Cambodia">Cambodia</option>
<option value="Cameroon">Cameroon</option>
<option value="Canada">Canada</option>
<option value="Cape Verde">Cape Verde</option>
<option value="Cayman Islands">Cayman Islands</option>
<option value="Central African Republic">Central African Republic</option>
<option value="Chad">Chad</option>
<option value="Chile">Chile</option>
<option value="China">China</option>
<option value="Christmas Island">Christmas Island</option>
<option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option>
<option value="Colombia">Colombia</option>
<option value="Comoros">Comoros</option>
<option value="Congo">Congo</option>
<option value="Congo, The Democratic Republic of The">Congo, The Democratic Republic of The</option>
<option value="Cook Islands">Cook Islands</option>
<option value="Costa Rica">Costa Rica</option>
<option value="Cote D'ivoire">Cote D'ivoire</option>
<option value="Croatia">Croatia</option>
<option value="Cuba">Cuba</option>
<option value="Cyprus">Cyprus</option>
<option value="Czech Republic">Czech Republic</option>
<option value="Denmark">Denmark</option>
<option value="Djibouti">Djibouti</option>
<option value="Dominica">Dominica</option>
<option value="Dominican Republic">Dominican Republic</option>
<option value="Ecuador">Ecuador</option>
<option value="Egypt">Egypt</option>
<option value="El Salvador">El Salvador</option>
<option value="Equatorial Guinea">Equatorial Guinea</option>
<option value="Eritrea">Eritrea</option>
<option value="Estonia">Estonia</option>
<option value="Ethiopia">Ethiopia</option>
<option value="Falkland Islands (Malvinas)">Falkland Islands (Malvinas)</option>
<option value="Faroe Islands">Faroe Islands</option>
<option value="Fiji">Fiji</option>
<option value="Finland">Finland</option>
<option value="France">France</option>
<option value="French Guiana">French Guiana</option>
<option value="French Polynesia">French Polynesia</option>
<option value="French Southern Territories">French Southern Territories</option>
<option value="Gabon">Gabon</option>
<option value="Gambia">Gambia</option>
<option value="Georgia">Georgia</option>
<option value="Germany">Germany</option>
<option value="Ghana">Ghana</option>
<option value="Gibraltar">Gibraltar</option>
<option value="Greece">Greece</option>
<option value="Greenland">Greenland</option>
<option value="Grenada">Grenada</option>
<option value="Guadeloupe">Guadeloupe</option>
<option value="Guam">Guam</option>
<option value="Guatemala">Guatemala</option>
<option value="Guinea">Guinea</option>
<option value="Guinea-bissau">Guinea-bissau</option>
<option value="Guyana">Guyana</option>
<option value="Haiti">Haiti</option>
<option value="Heard Island and Mcdonald Islands">Heard Island and Mcdonald Islands</option>
<option value="Holy See (Vatican City State)">Holy See (Vatican City State)</option>
<option value="Honduras">Honduras</option>
<option value="Hong Kong">Hong Kong</option>
<option value="Hungary">Hungary</option>
<option value="Iceland">Iceland</option>
<option value="India">India</option>
<option value="Indonesia">Indonesia</option>
<option value="Iran, Islamic Republic of">Iran, Islamic Republic of</option>
<option value="Iraq">Iraq</option>
<option value="Ireland">Ireland</option>
<option value="Israel">Israel</option>
<option value="Italy">Italy</option>
<option value="Jamaica">Jamaica</option>
<option value="Japan">Japan</option>
<option value="Jordan">Jordan</option>
<option value="Kazakhstan">Kazakhstan</option>
<option value="Kenya">Kenya</option>
<option value="Kiribati">Kiribati</option>
<option value="Korea, Democratic People's Republic of">Korea, Democratic People's Republic of</option>
<option value="Korea, Republic of">Korea, Republic of</option>
<option value="Kuwait">Kuwait</option>
<option value="Kyrgyzstan">Kyrgyzstan</option>
<option value="Lao People's Democratic Republic">Lao People's Democratic Republic</option>
<option value="Latvia">Latvia</option>
<option value="Lebanon">Lebanon</option>
<option value="Lesotho">Lesotho</option>
<option value="Liberia">Liberia</option>
<option value="Libyan Arab Jamahiriya">Libyan Arab Jamahiriya</option>
<option value="Liechtenstein">Liechtenstein</option>
<option value="Lithuania">Lithuania</option>
<option value="Luxembourg">Luxembourg</option>
<option value="Macao">Macao</option>
<option value="Macedonia, The Former Yugoslav Republic of">Macedonia, The Former Yugoslav Republic of</option>
<option value="Madagascar">Madagascar</option>
<option value="Malawi">Malawi</option>
<option value="Malaysia">Malaysia</option>
<option value="Maldives">Maldives</option>
<option value="Mali">Mali</option>
<option value="Malta">Malta</option>
<option value="Marshall Islands">Marshall Islands</option>
<option value="Martinique">Martinique</option>
<option value="Mauritania">Mauritania</option>
<option value="Mauritius">Mauritius</option>
<option value="Mayotte">Mayotte</option>
<option value="Mexico">Mexico</option>
<option value="Micronesia, Federated States of">Micronesia, Federated States of</option>
<option value="Moldova, Republic of">Moldova, Republic of</option>
<option value="Monaco">Monaco</option>
<option value="Mongolia">Mongolia</option>
<option value="Montserrat">Montserrat</option>
<option value="Morocco">Morocco</option>
<option value="Mozambique">Mozambique</option>
<option value="Myanmar">Myanmar</option>
<option value="Namibia">Namibia</option>
<option value="Nauru">Nauru</option>
<option value="Nepal">Nepal</option>
<option value="Netherlands">Netherlands</option>
<option value="Netherlands Antilles">Netherlands Antilles</option>
<option value="New Caledonia">New Caledonia</option>
<option value="New Zealand">New Zealand</option>
<option value="Nicaragua">Nicaragua</option>
<option value="Niger">Niger</option>
<option value="Nigeria">Nigeria</option>
<option value="Niue">Niue</option>
<option value="Norfolk Island">Norfolk Island</option>
<option value="Northern Mariana Islands">Northern Mariana Islands</option>
<option value="Norway">Norway</option>
<option value="Oman">Oman</option>
<option value="Pakistan">Pakistan</option>
<option value="Palau">Palau</option>
<option value="Palestinian Territory, Occupied">Palestinian Territory, Occupied</option>
<option value="Panama">Panama</option>
<option value="Papua New Guinea">Papua New Guinea</option>
<option value="Paraguay">Paraguay</option>
<option value="Peru">Peru</option>
<option value="Philippines">Philippines</option>
<option value="Pitcairn">Pitcairn</option>
<option value="Poland">Poland</option>
<option value="Portugal">Portugal</option>
<option value="Puerto Rico">Puerto Rico</option>
<option value="Qatar">Qatar</option>
<option value="Reunion">Reunion</option>
<option value="Romania">Romania</option>
<option value="Russian Federation">Russian Federation</option>
<option value="Rwanda">Rwanda</option>
<option value="Saint Helena">Saint Helena</option>
<option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
<option value="Saint Lucia">Saint Lucia</option>
<option value="Saint Pierre and Miquelon">Saint Pierre and Miquelon</option>
<option value="Saint Vincent and The Grenadines">Saint Vincent and The Grenadines</option>
<option value="Samoa">Samoa</option>
<option value="San Marino">San Marino</option>
<option value="Sao Tome and Principe">Sao Tome and Principe</option>
<option value="Saudi Arabia">Saudi Arabia</option>
<option value="Senegal">Senegal</option>
<option value="Serbia and Montenegro">Serbia and Montenegro</option>
<option value="Seychelles">Seychelles</option>
<option value="Sierra Leone">Sierra Leone</option>
<option value="Singapore">Singapore</option>
<option value="Slovakia">Slovakia</option>
<option value="Slovenia">Slovenia</option>
<option value="Solomon Islands">Solomon Islands</option>
<option value="Somalia">Somalia</option>
<option value="South Africa">South Africa</option>
<option value="South Georgia and The South Sandwich Islands">South Georgia and The South Sandwich Islands</option>
<option value="Spain">Spain</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="Sudan">Sudan</option>
<option value="Suriname">Suriname</option>
<option value="Svalbard and Jan Mayen">Svalbard and Jan Mayen</option>
<option value="Swaziland">Swaziland</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
<option value="Syrian Arab Republic">Syrian Arab Republic</option>
<option value="Taiwan, Province of China">Taiwan, Province of China</option>
<option value="Tajikistan">Tajikistan</option>
<option value="Tanzania, United Republic of">Tanzania, United Republic of</option>
<option value="Thailand">Thailand</option>
<option value="Timor-leste">Timor-leste</option>
<option value="Togo">Togo</option>
<option value="Tokelau">Tokelau</option>
<option value="Tonga">Tonga</option>
<option value="Trinidad and Tobago">Trinidad and Tobago</option>
<option value="Tunisia">Tunisia</option>
<option value="Turkey">Turkey</option>
<option value="Turkmenistan">Turkmenistan</option>
<option value="Turks and Caicos Islands">Turks and Caicos Islands</option>
<option value="Tuvalu">Tuvalu</option>
<option value="Uganda">Uganda</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
<option value="United States Minor Outlying Islands">United States Minor Outlying Islands</option>
<option value="Uruguay">Uruguay</option>
<option value="Uzbekistan">Uzbekistan</option>
<option value="Vanuatu">Vanuatu</option>
<option value="Venezuela">Venezuela</option>
<option value="Viet Nam">Viet Nam</option>
<option value="Virgin Islands, British">Virgin Islands, British</option>
<option value="Virgin Islands, U.S.">Virgin Islands, U.S.</option>
<option value="Wallis and Futuna">Wallis and Futuna</option>
<option value="Western Sahara">Western Sahara</option>
<option value="Yemen">Yemen</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select>
</div>
<div>
<em>Into This</em>
<select title="Choose a Country" class="chzn-select" style="width:350px;" tabindex="2" id="single_example">
<option value=""></option> <option value=""></option>
<option value="United States">United States</option> <option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option> <option value="United Kingdom">United Kingdom</option>
@ -247,7 +545,260 @@
<option value="Zambia">Zambia</option> <option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option> <option value="Zimbabwe">Zimbabwe</option>
</select> </select>
<select title="Choose a Country" class="chzn-select" style="width:350px;" tabindex="2"> </div>
</div>
<h2>Multiple Select</h2>
<div class="side-by-side clearfix">
<div>
<em>Turns This</em>
<select title="Choose a Country" style="width:350px;" multiple tabindex="3">
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antarctica">Antarctica</option>
<option value="Antigua and Barbuda">Antigua and Barbuda</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Aruba">Aruba</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Azerbaijan">Azerbaijan</option>
<option value="Bahamas">Bahamas</option>
<option value="Bahrain">Bahrain</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Barbados">Barbados</option>
<option value="Belarus">Belarus</option>
<option value="Belgium">Belgium</option>
<option value="Belize">Belize</option>
<option value="Benin">Benin</option>
<option value="Bermuda">Bermuda</option>
<option value="Bhutan">Bhutan</option>
<option value="Bolivia">Bolivia</option>
<option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
<option value="Botswana">Botswana</option>
<option value="Bouvet Island">Bouvet Island</option>
<option value="Brazil">Brazil</option>
<option value="British Indian Ocean Territory">British Indian Ocean Territory</option>
<option value="Brunei Darussalam">Brunei Darussalam</option>
<option value="Bulgaria">Bulgaria</option>
<option value="Burkina Faso">Burkina Faso</option>
<option value="Burundi">Burundi</option>
<option value="Cambodia">Cambodia</option>
<option value="Cameroon">Cameroon</option>
<option value="Canada">Canada</option>
<option value="Cape Verde">Cape Verde</option>
<option value="Cayman Islands">Cayman Islands</option>
<option value="Central African Republic">Central African Republic</option>
<option value="Chad">Chad</option>
<option value="Chile">Chile</option>
<option value="China">China</option>
<option value="Christmas Island">Christmas Island</option>
<option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option>
<option value="Colombia">Colombia</option>
<option value="Comoros">Comoros</option>
<option value="Congo">Congo</option>
<option value="Congo, The Democratic Republic of The">Congo, The Democratic Republic of The</option>
<option value="Cook Islands">Cook Islands</option>
<option value="Costa Rica">Costa Rica</option>
<option value="Cote D'ivoire">Cote D'ivoire</option>
<option value="Croatia">Croatia</option>
<option value="Cuba">Cuba</option>
<option value="Cyprus">Cyprus</option>
<option value="Czech Republic">Czech Republic</option>
<option value="Denmark">Denmark</option>
<option value="Djibouti">Djibouti</option>
<option value="Dominica">Dominica</option>
<option value="Dominican Republic">Dominican Republic</option>
<option value="Ecuador">Ecuador</option>
<option value="Egypt">Egypt</option>
<option value="El Salvador">El Salvador</option>
<option value="Equatorial Guinea">Equatorial Guinea</option>
<option value="Eritrea">Eritrea</option>
<option value="Estonia">Estonia</option>
<option value="Ethiopia">Ethiopia</option>
<option value="Falkland Islands (Malvinas)">Falkland Islands (Malvinas)</option>
<option value="Faroe Islands">Faroe Islands</option>
<option value="Fiji">Fiji</option>
<option value="Finland">Finland</option>
<option value="France">France</option>
<option value="French Guiana">French Guiana</option>
<option value="French Polynesia">French Polynesia</option>
<option value="French Southern Territories">French Southern Territories</option>
<option value="Gabon">Gabon</option>
<option value="Gambia">Gambia</option>
<option value="Georgia">Georgia</option>
<option value="Germany">Germany</option>
<option value="Ghana">Ghana</option>
<option value="Gibraltar">Gibraltar</option>
<option value="Greece">Greece</option>
<option value="Greenland">Greenland</option>
<option value="Grenada">Grenada</option>
<option value="Guadeloupe">Guadeloupe</option>
<option value="Guam">Guam</option>
<option value="Guatemala">Guatemala</option>
<option value="Guinea">Guinea</option>
<option value="Guinea-bissau">Guinea-bissau</option>
<option value="Guyana">Guyana</option>
<option value="Haiti">Haiti</option>
<option value="Heard Island and Mcdonald Islands">Heard Island and Mcdonald Islands</option>
<option value="Holy See (Vatican City State)">Holy See (Vatican City State)</option>
<option value="Honduras">Honduras</option>
<option value="Hong Kong">Hong Kong</option>
<option value="Hungary">Hungary</option>
<option value="Iceland">Iceland</option>
<option value="India">India</option>
<option value="Indonesia">Indonesia</option>
<option value="Iran, Islamic Republic of">Iran, Islamic Republic of</option>
<option value="Iraq">Iraq</option>
<option value="Ireland">Ireland</option>
<option value="Israel">Israel</option>
<option value="Italy">Italy</option>
<option value="Jamaica">Jamaica</option>
<option value="Japan">Japan</option>
<option value="Jordan">Jordan</option>
<option value="Kazakhstan">Kazakhstan</option>
<option value="Kenya">Kenya</option>
<option value="Kiribati">Kiribati</option>
<option value="Korea, Democratic People's Republic of">Korea, Democratic People's Republic of</option>
<option value="Korea, Republic of">Korea, Republic of</option>
<option value="Kuwait">Kuwait</option>
<option value="Kyrgyzstan">Kyrgyzstan</option>
<option value="Lao People's Democratic Republic">Lao People's Democratic Republic</option>
<option value="Latvia">Latvia</option>
<option value="Lebanon">Lebanon</option>
<option value="Lesotho">Lesotho</option>
<option value="Liberia">Liberia</option>
<option value="Libyan Arab Jamahiriya">Libyan Arab Jamahiriya</option>
<option value="Liechtenstein">Liechtenstein</option>
<option value="Lithuania">Lithuania</option>
<option value="Luxembourg">Luxembourg</option>
<option value="Macao">Macao</option>
<option value="Macedonia, The Former Yugoslav Republic of">Macedonia, The Former Yugoslav Republic of</option>
<option value="Madagascar">Madagascar</option>
<option value="Malawi">Malawi</option>
<option value="Malaysia">Malaysia</option>
<option value="Maldives">Maldives</option>
<option value="Mali">Mali</option>
<option value="Malta">Malta</option>
<option value="Marshall Islands">Marshall Islands</option>
<option value="Martinique">Martinique</option>
<option value="Mauritania">Mauritania</option>
<option value="Mauritius">Mauritius</option>
<option value="Mayotte">Mayotte</option>
<option value="Mexico">Mexico</option>
<option value="Micronesia, Federated States of">Micronesia, Federated States of</option>
<option value="Moldova, Republic of">Moldova, Republic of</option>
<option value="Monaco">Monaco</option>
<option value="Mongolia">Mongolia</option>
<option value="Montserrat">Montserrat</option>
<option value="Morocco">Morocco</option>
<option value="Mozambique">Mozambique</option>
<option value="Myanmar">Myanmar</option>
<option value="Namibia">Namibia</option>
<option value="Nauru">Nauru</option>
<option value="Nepal">Nepal</option>
<option value="Netherlands">Netherlands</option>
<option value="Netherlands Antilles">Netherlands Antilles</option>
<option value="New Caledonia">New Caledonia</option>
<option value="New Zealand">New Zealand</option>
<option value="Nicaragua">Nicaragua</option>
<option value="Niger">Niger</option>
<option value="Nigeria">Nigeria</option>
<option value="Niue">Niue</option>
<option value="Norfolk Island">Norfolk Island</option>
<option value="Northern Mariana Islands">Northern Mariana Islands</option>
<option value="Norway">Norway</option>
<option value="Oman">Oman</option>
<option value="Pakistan">Pakistan</option>
<option value="Palau">Palau</option>
<option value="Palestinian Territory, Occupied">Palestinian Territory, Occupied</option>
<option value="Panama">Panama</option>
<option value="Papua New Guinea">Papua New Guinea</option>
<option value="Paraguay">Paraguay</option>
<option value="Peru">Peru</option>
<option value="Philippines">Philippines</option>
<option value="Pitcairn">Pitcairn</option>
<option value="Poland">Poland</option>
<option value="Portugal">Portugal</option>
<option value="Puerto Rico">Puerto Rico</option>
<option value="Qatar">Qatar</option>
<option value="Reunion">Reunion</option>
<option value="Romania">Romania</option>
<option value="Russian Federation">Russian Federation</option>
<option value="Rwanda">Rwanda</option>
<option value="Saint Helena">Saint Helena</option>
<option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
<option value="Saint Lucia">Saint Lucia</option>
<option value="Saint Pierre and Miquelon">Saint Pierre and Miquelon</option>
<option value="Saint Vincent and The Grenadines">Saint Vincent and The Grenadines</option>
<option value="Samoa">Samoa</option>
<option value="San Marino">San Marino</option>
<option value="Sao Tome and Principe">Sao Tome and Principe</option>
<option value="Saudi Arabia">Saudi Arabia</option>
<option value="Senegal">Senegal</option>
<option value="Serbia and Montenegro">Serbia and Montenegro</option>
<option value="Seychelles">Seychelles</option>
<option value="Sierra Leone">Sierra Leone</option>
<option value="Singapore">Singapore</option>
<option value="Slovakia">Slovakia</option>
<option value="Slovenia">Slovenia</option>
<option value="Solomon Islands">Solomon Islands</option>
<option value="Somalia">Somalia</option>
<option value="South Africa">South Africa</option>
<option value="South Georgia and The South Sandwich Islands">South Georgia and The South Sandwich Islands</option>
<option value="Spain">Spain</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="Sudan">Sudan</option>
<option value="Suriname">Suriname</option>
<option value="Svalbard and Jan Mayen">Svalbard and Jan Mayen</option>
<option value="Swaziland">Swaziland</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
<option value="Syrian Arab Republic">Syrian Arab Republic</option>
<option value="Taiwan, Province of China">Taiwan, Province of China</option>
<option value="Tajikistan">Tajikistan</option>
<option value="Tanzania, United Republic of">Tanzania, United Republic of</option>
<option value="Thailand">Thailand</option>
<option value="Timor-leste">Timor-leste</option>
<option value="Togo">Togo</option>
<option value="Tokelau">Tokelau</option>
<option value="Tonga">Tonga</option>
<option value="Trinidad and Tobago">Trinidad and Tobago</option>
<option value="Tunisia">Tunisia</option>
<option value="Turkey">Turkey</option>
<option value="Turkmenistan">Turkmenistan</option>
<option value="Turks and Caicos Islands">Turks and Caicos Islands</option>
<option value="Tuvalu">Tuvalu</option>
<option value="Uganda">Uganda</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
<option value="United States Minor Outlying Islands">United States Minor Outlying Islands</option>
<option value="Uruguay">Uruguay</option>
<option value="Uzbekistan">Uzbekistan</option>
<option value="Vanuatu">Vanuatu</option>
<option value="Venezuela">Venezuela</option>
<option value="Viet Nam">Viet Nam</option>
<option value="Virgin Islands, British">Virgin Islands, British</option>
<option value="Virgin Islands, U.S.">Virgin Islands, U.S.</option>
<option value="Wallis and Futuna">Wallis and Futuna</option>
<option value="Western Sahara">Western Sahara</option>
<option value="Yemen">Yemen</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select>
</div>
<div>
<em>Into This</em>
<select title="Choose a Country" class="chzn-select" multiple style="width:350px;" tabindex="4" id="multi_example">
<option value=""></option> <option value=""></option>
<option value="United States">United States</option> <option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option> <option value="United Kingdom">United Kingdom</option>
@ -491,6 +1042,51 @@
<option value="Zambia">Zambia</option> <option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option> <option value="Zimbabwe">Zimbabwe</option>
</select> </select>
</div>
</div>
<h2>Why use Chosen?</h2>
<ul>
<li>
<h3>Easier to Use</h3>
<p>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.</p>
</li>
<li>
<h3>Progressive Enhancement</h3>
<p>Because chosen replaces normal html select fields, you don't need to do anything special to make it work for browsers without javascript.</p>
</li>
<li>
<h3>Lightweight</h3>
<p>Even un-minified, Chosen's JS, CSS and Images weigh in at under 50k.</p>
</li>
<li>
<h3>Painless Setup</h3>
<p>Add Chosen's files to your app and then add the class <em>chzn-select</em> to your select box. That's it, you're done!</p>
</li>
</ul>
<h2>Setup</h2>
<p>Using Chosen is easy as can be.</p>
<ol>
<li>Download the plug-in and copy the related files to your app.</li>
<li>Add the class <em>chzn-select</em> to any select box.</li>
<li><a href="http://youtu.be/pS-RsIzb78U?t=57s">Disco</a>.</li>
</ol>
<h2>FAQs</h2>
<ul class="faqs">
<li>
<em>Why did you build this built for Prototype?</em>
</li>
<li>
<em>What browsers are supported?</em>
</li>
<ul>
<footer>
Built by <a href="http://www.getharvest.com/">Harvest</a>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
<script src="chosen.proto.js"></script> <script src="chosen.proto.js"></script>
</body> </body>