From c8fba739ec230c28ff6807ef650536f1fdea5285 Mon Sep 17 00:00:00 2001 From: Patrick Filler Date: Wed, 22 Jun 2011 17:28:19 -0400 Subject: [PATCH] Chosen docs. --- chosen-arrows.png | Bin 0 -> 258 bytes chosen-close.png | Bin 0 -> 1384 bytes chosen.css | 174 +++-- chosen.proto.js | 246 ++++--- index.html | 1574 +++++++++++++++++++++++++++++++-------------- 5 files changed, 1370 insertions(+), 624 deletions(-) create mode 100644 chosen-arrows.png create mode 100644 chosen-close.png diff --git a/chosen-arrows.png b/chosen-arrows.png new file mode 100644 index 0000000000000000000000000000000000000000..01a6541c129a593dfca4af8c7a61fd9d792bfe06 GIT binary patch literal 258 zcmeAS@N?(olHy`uVBq!ia0vp^DnKmG!3-or3}jaVDajJoh?3y^w370~qErUQl>DSr z1<%~X^wgl##FWaylc_d9MOpzqA+F!Qf1fsO+NMpLrcRxD`}XahKYy-Xz53IqPa8LG z+_r7o)vH%0OqkHo(eeNPfA;xnGJ(4IN`m}?fm{S&a6NG61juer7srr_TW=DSr z1<%~X^wgl##FWaylc_cg49sbnArU1JzCKpT`MG+DAT@dwxdlMo3=B5*6$OdO*{LN8 zNvY|XdA3ULckfqH$V{%1*XSQL?vFu&J;D8jzb> zlBiITo0C^;Rbi_HHrEQs1_|pcDS(xfWZNo192Makpx~Tel&WB=XP}#GU}m6TW~gUq zY+`P1uA^XNU}&IkV5Dzoq-$tyWo%?+V4wg6Nh+i#(Mch>H3D2mX;thjEr=FDs+o0^GXscbn}XpVJ5hw7AF^F7L;V>=P7_pOiaoz zEwNPsx)kDt+yY-;xWReF(0~F4nSMoLfxe-hfqrf-$X{U9#U(+h2xnkbT^v$bkg6Y) zTAW{6lnjiIG-a4(VA$ce2&53`8Y};zOkkuW=D6f1m*%GCm3X??DgkBmQZiGl42{jq zT}@ov3{8v-%q$EIEsdNETwUGV49tuz4a^-~U}j*`>uT!eYV2rcW@hN>XlUqaU}<4w z>1Ju_)>8>&TbmFla)*qs@rtS-jTpF~~{bGao!m!m} zb8q)?HzgFFo9{U51^bJ`a{cK_YLh*WzW!?7ZD~`DFXu zXB|k1RJ+*WqU5i1&i?aHo8D71f6qOiZa4dE$R(B;J)MhwaDJMWm&9T%!x!SaXP$uL zzKJi+nY_%Lf8Ko_Q`aJs8Ho~y!&V=?{`#x_Pe!?Ix7Xf#S@NT9|ND#c%MXZiG879k z+civ>ayBh@h9b+Xv&)h%Jr#N2cH(K#-^(vW+5@@c<}A3tf1zE~b5_UCnz)a@|8AKj zEOJD!^N1){t9QWZr<s%i@dP0heEz^xnR{prEt=_+#&YnLf{? zM81_Z9jfA)!>Om(RMNC)=Bib*8U%URP6ji?G{4+swpp?W(IFrfp%TPrJK literal 0 HcmV?d00001 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(''), - 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.

      +
        +
      1. Download the plug-in and copy the related files to your app.
        2. +
      2. Add the class chzn-select to any select box.
        3. +
      3. Disco.
        4. +
      + +

      FAQs

      +
        +
      • + Why did you build this built for Prototype? +
        • +
      • + What browsers are supported? +
        • +
      \ No newline at end of file