Merge pull request #464 from kristerkari/master

Fixes for gradients and Right to Left support

.gitignore

@@ -1 +1,2 @@
-.DS_Store
+.DS_Store
+node_modules

Cakefile

@@ -11,12 +11,14 @@ CoffeeScript     = require 'coffee-script'
 
 javascripts = {
   'chosen/chosen.jquery.js': [
-    'coffee/chosen.jquery.coffee'
     'coffee/lib/select-parser.coffee'
+    'coffee/lib/abstract-chosen.coffee'
+    'coffee/chosen.jquery.coffee'
   ]
   'chosen/chosen.proto.js': [
-    'coffee/chosen.proto.coffee'
     'coffee/lib/select-parser.coffee'
+    'coffee/lib/abstract-chosen.coffee'
+    'coffee/chosen.proto.coffee'
   ]
 }
 
@@ -75,7 +77,8 @@ task 'build', 'build Chosen from source', build = (cb) ->
         write_chosen_javascript javascript.replace(/\.js$/,'.min.js'), (
           uglify.gen_code uglify.ast_squeeze uglify.ast_mangle parser.parse code
         )
-    cb() if typeof cb is 'function'
+    package_npm () ->
+      cb() if typeof cb is 'function'
   catch e
     print_error e, file_name, file_contents
  
@@ -92,6 +95,17 @@ task 'watch', 'watch coffee/ for changes and build Chosen', ->
           invoke 'build'
     )(file)
 
+task 'package_npm', 'generate the package.json file for npm', package_npm = (cb) ->
+  try
+    package_file = 'package.json'
+    package = JSON.parse("#{fs.readFileSync package_file}")
+    package['version'] = version()
+    fs.writeFileSync package_file, JSON.stringify(package, null, 2)
+    console.log "Wrote #{package_file}"
+    cb() if typeof cb is 'function'
+  catch e
+    print_error e, package_file
+
 run = (cmd, args, cb, err_cb) ->
   exec "#{cmd} #{args.join(' ')}", (err, stdout, stderr) ->
     if err isnt null

README.md

@@ -14,17 +14,20 @@ Contributions and pull requests are very welcome. Please follow these guidelines
 
 1. Make all changes in Coffeescript files, **not** JavaScript files.
 2. For feature changes, update both jQuery *and* Prototype versions
-3. Use 'cake build' to generate Chosen's JavaScript file and minified version.
-4. Don't touch the VERSION file
-5. Submit a Pull Request using GitHub.
+3. Use `npm install -d` to install the correct development dependencies.
+4. Use `cake build` or `cake watch` to generate Chosen's JavaScript file and minified version.
+5. Don't touch the `VERSION` file
+6. Submit a Pull Request using GitHub.
 
 ### Using CoffeeScript & Cake
 
-First, make sure you have the proper CoffeeScript / Cake set-up in place.
+First, make sure you have the proper CoffeeScript / Cake set-up in place. We have added a package.json that makes this easy:
 
-1. Install Coffeescript: the [CoffeeScript documentation](http://jashkenas.github.com/coffee-script/) provides easy-to-follow instructions.
-2. Install UglifyJS: <code>npm -g install uglify-js</code>
-3. Verify that your $NODE_PATH is properly configured using <code>echo $NODE_PATH</code>
+```
+npm install -d
+```
+
+This will install `coffee-script` and `uglifyjs`.
 
 Once you're configured, building the JavasScript from the command line is easy:
 
@@ -36,11 +39,12 @@ If you're interested, you can find the recipes in Cakefile.
 
 ### Chosen Credits
 
-- Built by [Harvest](http://www.getharvest.com/)
+- Built by [Harvest](http://www.getharvest.com/). Want to work on projects like this? [We’re hiring](http://www.getharvest.com/careers)!
 - Concept and development by [Patrick Filler](http://www.patrickfiller.com/)
 - Design and CSS by [Matthew Lettini](http://matthewlettini.com/)
 
 ### Notable Forks
 
 - [Chosen for MooTools](https://github.com/julesjanssen/chosen), by Jules Janssen
-- [Chosen Drupal 7 Module](https://github.com/Polzme/chosen), by Pol Dell'Aiera
+- [Chosen Drupal 7 Module](http://drupal.org/project/chosen), by Pol Dell'Aiera, Arshad Chummun, Bart Feenstra, Kálmán Hosszu, etc.
+- [Chosen CakePHP Plugin](https://github.com/paulredmond/chosen-cakephp), by Paul Redmond

VERSION

@@ -1 +1 @@
-0.9.3
+0.9.7

chosen/chosen.css

@@ -23,29 +23,32 @@
 
 /* @group Single Chosen */
 .chzn-container-single .chzn-single {
-  background-color: #fff;
-  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white));
-  background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 50%);
-  background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 50%);
-  background-image: -o-linear-gradient(top, #eeeeee 0%,#ffffff 50%);
-  background-image: -ms-linear-gradient(top, #eeeeee 0%,#ffffff 50%);
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 );
-  background-image: linear-gradient(top, #eeeeee 0%,#ffffff 50%);
-  -webkit-border-radius: 4px;
-  -moz-border-radius   : 4px;
-  border-radius        : 4px;
+  background-color: #ffffff;
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0 );   
+  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #ffffff), color-stop(50%, #f6f6f6), color-stop(52%, #eeeeee), color-stop(100%, #f4f4f4));
+  background-image: -webkit-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
+  background-image: -moz-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
+  background-image: -o-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
+  background-image: -ms-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
+  background-image: linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%); 
+  -webkit-border-radius: 5px;
+  -moz-border-radius   : 5px;
+  border-radius        : 5px;
   -moz-background-clip   : padding;
   -webkit-background-clip: padding-box;
   background-clip        : padding-box;
-  border: 1px solid #aaa;
+  border: 1px solid #aaaaaa;
+  -webkit-box-shadow: 0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1);
+  -moz-box-shadow   : 0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1);
+  box-shadow        : 0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1);
   display: block;
   overflow: hidden;
   white-space: nowrap;
   position: relative;
-  height: 26px;
-  line-height: 26px;
+  height: 23px;
+  line-height: 24px;
   padding: 0 0 0 8px;
-  color: #444;
+  color: #444444;
   text-decoration: none;
 }
 .chzn-container-single .chzn-single span {
@@ -57,22 +60,20 @@
   -ms-text-overflow: ellipsis;
   text-overflow: ellipsis;
 }
+.chzn-container-single .chzn-single abbr {
+  display: block;
+  position: absolute;
+  right: 26px;
+  top: 6px;
+  width: 12px;
+  height: 13px;
+  font-size: 1px;
+  background: url(chosen-sprite.png) right top no-repeat;
+}
+.chzn-container-single .chzn-single abbr:hover {
+  background-position: right -11px;
+}
 .chzn-container-single .chzn-single div {
-  -webkit-border-radius: 0 4px 4px 0;
-  -moz-border-radius   : 0 4px 4px 0;
-  border-radius        : 0 4px 4px 0;
-  -moz-background-clip   : padding;
-  -webkit-background-clip: padding-box;
-  background-clip        : padding-box;
-  background: #ccc;
-  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee));
-  background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%);
-  background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%);
-  background-image: -o-linear-gradient(bottom, #ccc 0%, #eee 60%);
-  background-image: -ms-linear-gradient(top, #cccccc 0%,#eeeeee 60%);
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#eeeeee',GradientType=0 );
-  background-image: linear-gradient(top, #cccccc 0%,#eeeeee 60%);
-  border-left: 1px solid #aaa;
   position: absolute;
   right: 0;
   top: 0;
@@ -81,25 +82,26 @@
   width: 18px;
 }
 .chzn-container-single .chzn-single div b {
-  background: url('chosen-sprite.png') no-repeat 0 1px;
+  background: url('chosen-sprite.png') no-repeat 0 0;
   display: block;
   width: 100%;
   height: 100%;
 }
 .chzn-container-single .chzn-search {
   padding: 3px 4px;
+  position: relative;
   margin: 0;
   white-space: nowrap;
+  z-index: 1010;
 }
 .chzn-container-single .chzn-search input {
-  background: #fff url('chosen-sprite.png') no-repeat 100% -20px;
-  background: url('chosen-sprite.png') no-repeat 100% -20px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
-  background: url('chosen-sprite.png') no-repeat 100% -20px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
-  background: url('chosen-sprite.png') no-repeat 100% -20px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
-  background: url('chosen-sprite.png') no-repeat 100% -20px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
-  background: url('chosen-sprite.png') no-repeat 100% -20px, -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%);
-  background: url('chosen-sprite.png') no-repeat 100% -20px, -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%);
-  background: url('chosen-sprite.png') no-repeat 100% -20px, linear-gradient(top, #ffffff 85%,#eeeeee 99%);
+  background: #fff url('chosen-sprite.png') no-repeat 100% -22px;
+  background: url('chosen-sprite.png') no-repeat 100% -22px, -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
+  background: url('chosen-sprite.png') no-repeat 100% -22px, -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
+  background: url('chosen-sprite.png') no-repeat 100% -22px, -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
+  background: url('chosen-sprite.png') no-repeat 100% -22px, -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
+  background: url('chosen-sprite.png') no-repeat 100% -22px, -ms-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
+  background: url('chosen-sprite.png') no-repeat 100% -22px, linear-gradient(top, #eeeeee 1%, #ffffff 15%);
   margin: 1px 0;
   padding: 4px 20px 4px 5px;
   outline: 0;
@@ -117,16 +119,20 @@
 }
 /* @end */
 
+.chzn-container-single-nosearch .chzn-search input {
+  position: absolute;
+  left: -9000px;
+}
+
 /* @group Multi Chosen */
 .chzn-container-multi .chzn-choices {
   background-color: #fff;
-  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
-  background-image: -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
-  background-image: -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
-  background-image: -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
-  background-image: -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%);
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );
-  background-image: linear-gradient(top, #ffffff 85%,#eeeeee 99%);
+  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
+  background-image: -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
+  background-image: -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
+  background-image: -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
+  background-image: -ms-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
+  background-image: linear-gradient(top, #eeeeee 1%, #ffffff 15%);
   border: 1px solid #aaa;
   margin: 0;
   padding: 0;
@@ -149,6 +155,9 @@
   color: #666;
   background: transparent !important;
   border: 0 !important;
+  font-family: sans-serif;
+  font-size: 100%;
+  height: 15px;
   padding: 5px;
   margin: 1px 0;
   outline: 0;
@@ -168,21 +177,22 @@
   -webkit-background-clip: padding-box;
   background-clip        : padding-box;
   background-color: #e4e4e4;
-  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #e4e4e4), color-stop(0.7, #eeeeee));
-  background-image: -webkit-linear-gradient(center bottom, #e4e4e4 0%, #eeeeee 70%);
-  background-image: -moz-linear-gradient(center bottom, #e4e4e4 0%, #eeeeee 70%);
-  background-image: -o-linear-gradient(bottom, #e4e4e4 0%, #eeeeee 70%);
-  background-image: -ms-linear-gradient(top, #e4e4e4 0%,#eeeeee 70%);
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4e4e4', endColorstr='#eeeeee',GradientType=0 );
-  background-image: linear-gradient(top, #e4e4e4 0%,#eeeeee 70%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#eeeeee', GradientType=0 ); 
+  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
+  background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
+  background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
+  background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
+  background-image: -ms-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
+  background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); 
+  -webkit-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
+  -moz-box-shadow   : 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
+  box-shadow        : 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
   color: #333;
-  border: 1px solid #b4b4b4;
+  border: 1px solid #aaaaaa;
   line-height: 13px;
-  padding: 3px 19px 3px 6px;
+  padding: 3px 20px 3px 5px;
   margin: 3px 0 3px 5px;
   position: relative;
-}
-.chzn-container-multi .chzn-choices .search-choice span {
   cursor: default;
 }
 .chzn-container-multi .chzn-choices .search-choice-focus {
@@ -191,25 +201,25 @@
 .chzn-container-multi .chzn-choices .search-choice .search-choice-close {
   display: block;
   position: absolute;
-  right: 5px;
-  top: 6px;
-  width: 8px;
-  height: 9px;
+  right: 3px;
+  top: 4px;
+  width: 12px;
+  height: 13px;
   font-size: 1px;
   background: url(chosen-sprite.png) right top no-repeat;
 }
 .chzn-container-multi .chzn-choices .search-choice .search-choice-close:hover {
-  background-position: right -9px;
+  background-position: right -11px;
 }
 .chzn-container-multi .chzn-choices .search-choice-focus .search-choice-close {
-  background-position: right -9px;
+  background-position: right -11px;
 }
 /* @end */
 
 /* @group Results */
 .chzn-container .chzn-results {
   margin: 0 4px 4px 0;
-  max-height: 190px;
+  max-height: 240px;
   padding: 0 0 0 4px;
   position: relative;
   overflow-x: hidden;
@@ -220,16 +230,25 @@
   padding: 0;
 }
 .chzn-container .chzn-results li {
-  line-height: 80%;
-  padding: 7px 7px 8px;
+  display: none;
+  line-height: 15px;
+  padding: 5px 6px;
   margin: 0;
   list-style: none;
 }
 .chzn-container .chzn-results .active-result {
   cursor: pointer;
+  display: list-item;
 }
 .chzn-container .chzn-results .highlighted {
-  background: #3875d7;
+  background-color: #3875d7;
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3875d7', endColorstr='#2a62bc', GradientType=0 );  
+  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #3875d7), color-stop(90%, #2a62bc));
+  background-image: -webkit-linear-gradient(top, #3875d7 20%, #2a62bc 90%);
+  background-image: -moz-linear-gradient(top, #3875d7 20%, #2a62bc 90%);
+  background-image: -o-linear-gradient(top, #3875d7 20%, #2a62bc 90%);
+  background-image: -ms-linear-gradient(top, #3875d7 20%, #2a62bc 90%);
+  background-image: linear-gradient(top, #3875d7 20%, #2a62bc 90%);
   color: #fff;
 }
 .chzn-container .chzn-results li em {
@@ -241,6 +260,7 @@
 }
 .chzn-container .chzn-results .no-results {
   background: #f4f4f4;
+  display: list-item;
 }
 .chzn-container .chzn-results .group-result {
   cursor: default;
@@ -248,11 +268,34 @@
   font-weight: bold;
 }
 .chzn-container .chzn-results .group-option {
-  padding-left: 20px;
+  padding-left: 15px;
 }
 .chzn-container-multi .chzn-drop .result-selected {
   display: none;
 }
+.chzn-container .chzn-results-scroll {
+  background: white;
+  margin: 0 4px;
+  position: absolute;
+  text-align: center;
+  width: 321px; /* This should by dynamic with js */
+  z-index: 1;
+}
+.chzn-container .chzn-results-scroll span {
+  display: inline-block;
+  height: 17px;
+  text-indent: -5000px;
+  width: 9px;
+}
+.chzn-container .chzn-results-scroll-down {
+  bottom: 0;
+}
+.chzn-container .chzn-results-scroll-down span {
+  background: url('chosen-sprite.png') no-repeat -4px -3px;
+}
+.chzn-container .chzn-results-scroll-up span {
+  background: url('chosen-sprite.png') no-repeat -22px -3px;
+}
 /* @end */
 
 /* @group Active  */
@@ -270,13 +313,13 @@
   -o-box-shadow     : 0 1px 0 #fff inset;
   box-shadow        : 0 1px 0 #fff inset;
   background-color: #eee;
-  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, white), color-stop(0.5, #eeeeee));
-  background-image: -webkit-linear-gradient(center bottom, white 0%, #eeeeee 50%);
-  background-image: -moz-linear-gradient(center bottom, white 0%, #eeeeee 50%);
-  background-image: -o-linear-gradient(bottom, white 0%, #eeeeee 50%);
-  background-image: -ms-linear-gradient(top, #ffffff 0%,#eeeeee 50%);
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );
-  background-image: linear-gradient(top, #ffffff 0%,#eeeeee 50%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0 );
+  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #eeeeee), color-stop(80%, #ffffff));
+  background-image: -webkit-linear-gradient(top, #eeeeee 20%, #ffffff 80%);
+  background-image: -moz-linear-gradient(top, #eeeeee 20%, #ffffff 80%);
+  background-image: -o-linear-gradient(top, #eeeeee 20%, #ffffff 80%);
+  background-image: -ms-linear-gradient(top, #eeeeee 20%, #ffffff 80%);
+  background-image: linear-gradient(top, #eeeeee 20%, #ffffff 80%);
   -webkit-border-bottom-left-radius : 0;
   -webkit-border-bottom-right-radius: 0;
   -moz-border-radius-bottomleft : 0;
@@ -303,32 +346,44 @@
 }
 /* @end */
 
-/* @group Right to Left */
-.chzn-rtl { direction:rtl;text-align: right; }
-.chzn-rtl .chzn-single { padding-left: 0; padding-right: 8px; }
-.chzn-rtl .chzn-single span { margin-left: 26px; margin-right: 0; }
-.chzn-rtl .chzn-single div { 
-  left: 0; right: auto; 
-  border-left: none; border-right: 1px solid #aaaaaa;
-  -webkit-border-radius: 4px 0 0 4px;
-  -moz-border-radius   : 4px 0 0 4px;
-  border-radius        : 4px 0 0 4px; 
+/* @group Disabled Support */
+.chzn-disabled {
+  cursor: default;
+  opacity:0.5 !important;
 }
+.chzn-disabled .chzn-single {
+  cursor: default;
+}
+.chzn-disabled .chzn-choices .search-choice .search-choice-close {
+  cursor: default;
+}
+
+/* @group Right to Left */
+.chzn-rtl { text-align: right; }
+.chzn-rtl .chzn-single { padding: 0 8px 0 0; overflow: visible; }
+.chzn-rtl .chzn-single span { margin-left: 26px; margin-right: 0; direction: rtl; }
+
+.chzn-rtl .chzn-single div { left: 3px; right: auto; }
+.chzn-rtl .chzn-single abbr {
+  left: 26px;
+  right: auto;
+}
+.chzn-rtl .chzn-choices .search-field input { direction: rtl; }
 .chzn-rtl .chzn-choices li { float: right; }
-.chzn-rtl .chzn-choices .search-choice { padding: 3px 6px 3px 19px; margin: 3px 5px 3px 0; }
-.chzn-rtl .chzn-choices .search-choice .search-choice-close { left: 5px; right: auto; background-position: right top;}
-.chzn-rtl.chzn-container-single .chzn-results { margin-left: 4px; margin-right: 0; padding-left: 0; padding-right: 4px; }
-.chzn-rtl .chzn-results .group-option { padding-left: 0; padding-right: 20px; }
+.chzn-rtl .chzn-choices .search-choice { padding: 3px 5px 3px 19px; margin: 3px 5px 3px 0; }
+.chzn-rtl .chzn-choices .search-choice .search-choice-close { left: 4px; right: auto; background-position: right top;}
+.chzn-rtl.chzn-container-single .chzn-results { margin: 0 0 4px 4px; padding: 0 4px 0 0; }
+.chzn-rtl .chzn-results .group-option { padding-left: 0; padding-right: 15px; }
 .chzn-rtl.chzn-container-active .chzn-single-with-drop div { border-right: none; }
 .chzn-rtl .chzn-search input {
-  background: url('chosen-sprite.png') no-repeat -38px -20px, #ffffff;
-  background: url('chosen-sprite.png') no-repeat -38px -20px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
-  background: url('chosen-sprite.png') no-repeat -38px -20px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);  
-  background: url('chosen-sprite.png') no-repeat -38px -20px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
-  background: url('chosen-sprite.png') no-repeat -38px -20px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
-  background: url('chosen-sprite.png') no-repeat -38px -20px, -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%);
-  background: url('chosen-sprite.png') no-repeat -38px -20px, -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%);
-  background: url('chosen-sprite.png') no-repeat -38px -20px, linear-gradient(top, #ffffff 85%,#eeeeee 99%);
+  background: #fff url('chosen-sprite.png') no-repeat -38px -22px;
+  background: url('chosen-sprite.png') no-repeat -38px -22px, -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
+  background: url('chosen-sprite.png') no-repeat -38px -22px, -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%);  
+  background: url('chosen-sprite.png') no-repeat -38px -22px, -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
+  background: url('chosen-sprite.png') no-repeat -38px -22px, -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
+  background: url('chosen-sprite.png') no-repeat -38px -22px, -ms-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
+  background: url('chosen-sprite.png') no-repeat -38px -22px, linear-gradient(top, #eeeeee 1%, #ffffff 15%);
   padding: 4px 5px 4px 20px;
+  direction: rtl;
 }
-/* @end */
+/* @end */

coffee/chosen.jquery.coffee

@@ -7,40 +7,22 @@ $ = jQuery
 
 $.fn.extend({
   chosen: (options) ->
-    return this if $.browser is "msie" and ($.browser.version is "6.0" or  $.browser.version is "7.0")
+    # Do no harm and return as soon as possible for unsupported browsers, namely IE6 and IE7
+    return this if $.browser.msie and ($.browser.version is "6.0" or  $.browser.version is "7.0")
     $(this).each((input_field) ->
       new Chosen(this, options) unless ($ this).hasClass "chzn-done"
     )
-}) 
+})
 
-class Chosen
+class Chosen extends AbstractChosen
 
-  constructor: (elmn, options) ->
-    @options = options or {}
-    this.set_default_values()
-    
-    @form_field = elmn
+  setup: ->
     @form_field_jq = $ @form_field
-    @is_multiple = @form_field.multiple
     @is_rtl = @form_field_jq.hasClass "chzn-rtl"
 
-    @default_text_default = if @form_field.multiple then "Select Some Options" else "Select an Option"
-
-    this.set_up_html()
-    this.register_observers()
+  finish_setup: ->
     @form_field_jq.addClass "chzn-done"
 
-  set_default_values: ->
-    
-    @click_test_action = (evt) => this.test_active_click(evt)
-    @active_field = false
-    @mouse_on_container = false
-    @results_showing = false
-    @result_highlighted = null
-    @result_single_selected = null
-    @choices = 0
-    @results_none_found = @options.no_results_text or "No results match"
-
   set_up_html: ->
     @container_id = if @form_field.id.length then @form_field.id.replace(/(:|\.)/g, '_') else this.generate_field_id()
     @container_id += "_chzn"
@@ -51,7 +33,7 @@ class Chosen
     
     container_div = ($ "<div />", {
       id: @container_id
-      class: "chzn-container #{ if @is_rtl then 'chzn-rtl' else '' }"
+      class: "chzn-container#{ if @is_rtl then ' chzn-rtl' else '' }"
       style: 'width: ' + (@f_width) + 'px;' #use parens around @f_width so coffeescript doesn't think + ' px' is a function parameter
     })
     
@@ -87,10 +69,11 @@ class Chosen
     
     this.results_build()
     this.set_tab_index()
-
+    @form_field_jq.trigger("liszt:ready", {chosen: this})
 
   register_observers: ->
     @container.mousedown (evt) => this.container_mousedown(evt)
+    @container.mouseup (evt) => this.container_mouseup(evt)
     @container.mouseenter (evt) => this.mouse_enter(evt)
     @container.mouseleave (evt) => this.mouse_leave(evt)
   
@@ -108,34 +91,40 @@ class Chosen
       @search_choices.click (evt) => this.choices_click(evt)
       @search_field.focus (evt) => this.input_focus(evt)
     else
-      @selected_item.focus (evt) => this.activate_field(evt)
+      @container.click (evt) => evt.preventDefault() # gobble click of anchor
+
+  search_field_disabled: ->
+    @is_disabled = @form_field_jq[0].disabled
+    if(@is_disabled)
+      @container.addClass 'chzn-disabled'
+      @search_field[0].disabled = true
+      @selected_item.unbind "focus", @activate_action if !@is_multiple
+      this.close_field()
+    else
+      @container.removeClass 'chzn-disabled'
+      @search_field[0].disabled = false
+      @selected_item.bind "focus", @activate_action if !@is_multiple
 
   container_mousedown: (evt) ->
-    if evt and evt.type is "mousedown"
-      evt.stopPropagation()
-    if not @pending_destroy_click
-      if not @active_field
-        @search_field.val "" if @is_multiple
-        $(document).click @click_test_action
-        this.results_show()
-      else if not @is_multiple and evt and ($(evt.target) is @selected_item || $(evt.target).parents("a.chzn-single").length)
-        evt.preventDefault()
-        this.results_toggle()
+    if !@is_disabled
+      target_closelink =  if evt? then ($ evt.target).hasClass "search-choice-close" else false
+      if evt and evt.type is "mousedown"
+        evt.stopPropagation()
+      if not @pending_destroy_click and not target_closelink
+        if not @active_field
+          @search_field.val "" if @is_multiple
+          $(document).click @click_test_action
+          this.results_show()
+        else if not @is_multiple and evt and (($(evt.target)[0] == @selected_item[0]) || $(evt.target).parents("a.chzn-single").length)
+          evt.preventDefault()
+          this.results_toggle()
 
-      this.activate_field()
-    else
-      @pending_destroy_click = false
+        this.activate_field()
+      else
+        @pending_destroy_click = false
 
-  mouse_enter: -> @mouse_on_container = true
-  mouse_leave: -> @mouse_on_container = false
-
-  input_focus: (evt) ->
-    setTimeout (=> this.container_mousedown()), 50 unless @active_field
-  
-  input_blur: (evt) ->
-    if not @mouse_on_container
-      @active_field = false
-      setTimeout (=> this.blur_test()), 100
+  container_mouseup: (evt) ->
+    this.results_reset(evt) if evt.target.nodeName is "ABBR"
 
   blur_test: (evt) ->
     this.close_field() if not @active_field and @container.hasClass "chzn-container-active"
@@ -176,7 +165,6 @@ class Chosen
       this.close_field()
     
   results_build: ->
-    startTime = new Date()
     @parsing = true
     @results_data = root.SelectParser.select_to_array @form_field
 
@@ -185,6 +173,10 @@ class Chosen
       @choices = 0
     else if not @is_multiple
       @selected_item.find("span").text @default_text
+      if @form_field.options.length <= @disable_search_threshold
+        @container.addClass "chzn-container-single-nosearch"
+      else
+        @container.removeClass "chzn-container-single-nosearch"
 
     content = ''
     for data in @results_data
@@ -196,7 +188,9 @@ class Chosen
           this.choice_build data
         else if data.selected and not @is_multiple
           @selected_item.find("span").text data.text
+          this.single_deselect_control_build() if @allow_single_deselect
 
+    this.search_field_disabled()
     this.show_search_field_default()
     this.search_field_scale()
     
@@ -211,23 +205,6 @@ class Chosen
     else
       ""
   
-  result_add_option: (option) ->
-    if not option.disabled
-      option.dom_id = @container_id + "_o_" + option.array_index
-      
-      classes = if option.selected and @is_multiple then [] else ["active-result"]
-      classes.push "result-selected" if option.selected
-      classes.push "group-option" if option.group_array_index?
-      
-      '<li id="' + option.dom_id + '" class="' + classes.join(' ') + '">' + option.html + '</li>'
-    else
-      ""
-
-  results_update_field: ->
-    this.result_clear_highlight()
-    @result_single_selected = null
-    this.results_build()
-
   result_do_highlight: (el) ->
     if el.length
       this.result_clear_highlight()
@@ -251,12 +228,6 @@ class Chosen
     @result_highlight.removeClass "highlighted" if @result_highlight
     @result_highlight = null
 
-  results_toggle: ->
-    if @results_showing
-      this.results_hide()
-    else
-      this.results_show()
-
   results_show: ->
     if not @is_multiple
       @selected_item.addClass "chzn-single-with-drop"
@@ -326,8 +297,11 @@ class Chosen
 
   choice_destroy_link_click: (evt) ->
     evt.preventDefault()
-    @pending_destroy_click = true
-    this.choice_destroy $(evt.target)
+    if not @is_disabled
+      @pending_destroy_click = true
+      this.choice_destroy $(evt.target)
+    else
+      evt.stopPropagation
 
   choice_destroy: (link) ->
     @choices -= 1
@@ -338,6 +312,14 @@ class Chosen
     this.result_deselect (link.attr "rel")
     link.parents('li').first().remove()
 
+  results_reset: (evt) ->
+    @form_field.options[0].selected = true
+    @selected_item.find("span").text @default_text
+    this.show_search_field_default()
+    $(evt.target).remove();
+    @form_field_jq.trigger "change"
+    this.results_hide() if @active_field
+
   result_select: (evt) ->
     if @result_highlight
       high = @result_highlight
@@ -345,13 +327,14 @@ class Chosen
       
       this.result_clear_highlight()
 
-      high.addClass "result-selected"
-      
       if @is_multiple
         this.result_deactivate high
       else
+        @search_results.find(".result-selected").removeClass "result-selected"
         @result_single_selected = high
       
+      high.addClass "result-selected"
+      
       position = high_id.substr(high_id.lastIndexOf("_") + 1 )
       item = @results_data[position]
       item.selected = true
@@ -362,7 +345,8 @@ class Chosen
         this.choice_build item
       else
         @selected_item.find("span").first().text item.text
-
+        this.single_deselect_control_build() if @allow_single_deselect
+      
       this.results_hide() unless evt.metaKey and @is_multiple
 
       @search_field.val ""
@@ -371,10 +355,10 @@ class Chosen
       this.search_field_scale()
 
   result_activate: (el) ->
-    el.addClass("active-result").show()
+    el.addClass("active-result")
 
   result_deactivate: (el) ->
-    el.removeClass("active-result").hide()
+    el.removeClass("active-result")
 
   result_deselect: (pos) ->
     result_data = @results_data[pos]
@@ -390,14 +374,10 @@ class Chosen
     @form_field_jq.trigger "change"
     this.search_field_scale()
 
-  results_search: (evt) ->
-    if @results_showing
-      this.winnow_results()
-    else
-      this.results_show()
+  single_deselect_control_build: ->
+    @selected_item.find("span").first().after "<abbr class=\"search-choice-close\"></abbr>" if @allow_single_deselect and @selected_item.find("abbr").length < 1
 
   winnow_results: ->
-    startTime = new Date()
     this.no_results_clear()
     
     results = 0
@@ -409,10 +389,11 @@ class Chosen
     for option in @results_data
       if not option.disabled and not option.empty
         if option.group
-          $('#' + option.dom_id).hide()
+          $('#' + option.dom_id).css('display', 'none')
         else if not (@is_multiple and option.selected)
           found = false
           result_id = option.dom_id
+          result = $("#" + result_id)
           
           if regex.test option.html
             found = true
@@ -433,16 +414,15 @@ class Chosen
               text = text.substr(0, startpos) + '<em>' + text.substr(startpos)
             else
               text = option.html
+            
+            result.html(text)
+            this.result_activate result
 
-            $("#" + result_id).html text if $("#" + result_id).html != text
-
-            this.result_activate $("#" + result_id)
-
-            $("#" + @results_data[option.group_array_index].dom_id).show() if option.group_array_index?
+            $("#" + @results_data[option.group_array_index].dom_id).css('display', 'list-item') if option.group_array_index?
           else
             this.result_clear_highlight() if @result_highlight and result_id is @result_highlight.attr 'id'
-            this.result_deactivate $("#" + result_id)
-    
+            this.result_deactivate result
+
     if results < 1 and searchText.length
       this.no_results searchText
     else
@@ -455,14 +435,14 @@ class Chosen
     for li in lis
       li = $(li)
       if li.hasClass "group-result"
-        li.show()
+        li.css('display', 'auto')
       else if not @is_multiple or not li.hasClass "result-selected"
         this.result_activate li
 
   winnow_results_set_highlight: ->
     if not @result_highlight
 
-      selected_results = if not @is_multiple then @search_results.find(".result-selected") else []
+      selected_results = if not @is_multiple then @search_results.find(".result-selected.active-result") else []
       do_high = if selected_results.length then selected_results.first() else @search_results.find(".active-result").first()
 
       this.result_do_highlight do_high if do_high?
@@ -509,27 +489,6 @@ class Chosen
     @pending_backstroke.removeClass "search-choice-focus" if @pending_backstroke
     @pending_backstroke = null
 
-  keyup_checker: (evt) ->
-    stroke = evt.which ? evt.keyCode
-    this.search_field_scale()
-
-    switch stroke
-      when 8
-        if @is_multiple and @backstroke_length < 1 and @choices > 0
-          this.keydown_backstroke()
-        else if not @pending_backstroke
-          this.result_clear_highlight()
-          this.results_search()
-      when 13
-        evt.preventDefault()
-        this.result_select(evt) if this.results_showing
-      when 27
-        this.results_hide() if @results_showing
-      when 9, 38, 40, 16, 91, 17
-        # don't do anything on these keys
-      else this.results_search()
-
-
   keydown_checker: (evt) ->
     stroke = evt.which ? evt.keyCode
     this.search_field_scale()
@@ -541,6 +500,7 @@ class Chosen
         @backstroke_length = this.search_field.val().length
         break
       when 9
+        this.result_select(evt) if this.results_showing and not @is_multiple
         @mouse_on_container = false
         break
       when 13
@@ -553,8 +513,7 @@ class Chosen
       when 40
         this.keydown_arrow()
         break
-
-
+  
   search_field_scale: ->
     if @is_multiple
       h = 0
@@ -581,22 +540,12 @@ class Chosen
       dd_top = @container.height()
       @dropdown.css({"top":  dd_top + "px"})
   
-  generate_field_id: ->
-    new_id = this.generate_random_id()
-    @form_field.id = new_id
-    new_id
-  
   generate_random_id: ->
     string = "sel" + this.generate_random_char() + this.generate_random_char() + this.generate_random_char()
     while $("#" + string).length > 0
       string += this.generate_random_char()
     string
     
-  generate_random_char: ->
-    chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZ";
-    rand = Math.floor(Math.random() * chars.length)
-    newchar = chars.substring rand, rand+1
-
 get_side_border_padding = (elmt) ->
   side_border_padding = elmt.outerWidth() - elmt.width()
 

coffee/chosen.proto.coffee

@@ -4,43 +4,23 @@ Copyright (c) 2011 by Harvest
 ###
 root = this
 
-class Chosen
+class Chosen extends AbstractChosen
 
-  constructor: (elmn, options) ->
-    @options = options or {}
-
-    this.set_default_values()
-    
-    @form_field = elmn
-    @is_multiple = @form_field.multiple
+  setup: ->
     @is_rtl = @form_field.hasClassName "chzn-rtl"
 
-    @default_text_default = if @form_field.multiple then "Select Some Options" else "Select an Option"
-
-    this.set_up_html()
-    this.register_observers()
+  finish_setup: ->
     @form_field.addClassName "chzn-done"
 
-
   set_default_values: ->
+    super()
     
-    @click_test_action = (evt) => this.test_active_click(evt)
-    @active_field = false
-    @mouse_on_container = false
-    @results_showing = false
-    @result_highlighted = null
-    @result_single_selected = null
-    @choices = 0
-
-    @results_none_found = @options.no_results_text or "No results match"
-
     # HTML Templates
     @single_temp = new Template('<a href="javascript:void(0)" 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" autocomplete="off" /></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" autocomplete="off" 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="javascript:void(0)" class="search-choice-close" rel="#{position}"></a></li>')
     @no_results_temp = new Template('<li class="no-results">' + @results_none_found + ' "<span>#{terms}</span>"</li>')
 
-
   set_up_html: ->
     @container_id = @form_field.identify().replace(/(:|\.)/g, '_') + "_chzn"
     
@@ -48,7 +28,7 @@ class Chosen
     
     container_props =
       'id': @container_id
-      'class': "chzn-container #{ if @is_rtl then 'chzn-rtl' else '' }"
+      'class': "chzn-container#{ if @is_rtl then ' chzn-rtl' else '' }"
       'style': 'width: ' + (@f_width) + 'px' #use parens around @f_width so coffeescript doesn't think + ' px' is a function parameter
     
     @default_text = if @form_field.readAttribute 'data-placeholder' then @form_field.readAttribute 'data-placeholder' else @default_text_default
@@ -82,10 +62,11 @@ class Chosen
     
     this.results_build()
     this.set_tab_index()
-
+    @form_field.fire("liszt:ready", {chosen: this})
 
   register_observers: ->
     @container.observe "mousedown", (evt) => this.container_mousedown(evt)
+    @container.observe "mouseup", (evt) => this.container_mouseup(evt)
     @container.observe "mouseenter", (evt) => this.mouse_enter(evt)
     @container.observe "mouseleave", (evt) => this.mouse_leave(evt)
     
@@ -103,34 +84,39 @@ class Chosen
       @search_choices.observe "click", (evt) => this.choices_click(evt)
       @search_field.observe "focus", (evt) => this.input_focus(evt)
     else
-      @selected_item.observe "focus", (evt) => this.activate_field(evt)
+      @container.observe "click", (evt) => evt.preventDefault() # gobble click of anchor
 
+  search_field_disabled: ->
+    @is_disabled = @form_field.disabled
+    if(@is_disabled)
+      @container.addClassName 'chzn-disabled'
+      @search_field.disabled = true
+      @selected_item.stopObserving "focus", @activate_action if !@is_multiple
+      this.close_field()
+    else
+      @container.removeClassName 'chzn-disabled'
+      @search_field.disabled = false
+      @selected_item.observe "focus", @activate_action if !@is_multiple
 
   container_mousedown: (evt) ->
-    if evt and evt.type is "mousedown"
-      evt.stop()
-    if not @pending_destroy_click
-      if not @active_field
-        @search_field.clear() if @is_multiple
-        document.observe "click", @click_test_action
-        this.results_show()
-      else if not @is_multiple and evt and (evt.target is @selected_item || evt.target.up("a.chzn-single"))
-        this.results_toggle()
+    if !@is_disabled
+      target_closelink =  if evt? then evt.target.hasClassName "search-choice-close" else false
+      if evt and evt.type is "mousedown"
+        evt.stop()
+      if not @pending_destroy_click and not target_closelink
+        if not @active_field
+          @search_field.clear() if @is_multiple
+          document.observe "click", @click_test_action
+          this.results_show()
+        else if not @is_multiple and evt and (evt.target is @selected_item || evt.target.up("a.chzn-single"))
+          this.results_toggle()
 
-      this.activate_field()
-    else
-      @pending_destroy_click = false
-
-  mouse_enter: -> @mouse_on_container = true
-  mouse_leave: -> @mouse_on_container = false
-
-  input_focus: (evt) ->
-    setTimeout this.container_mousedown.bind(this), 50 unless @active_field
+        this.activate_field()
+      else
+        @pending_destroy_click = false
   
-  input_blur: (evt) ->
-    if not @mouse_on_container
-      @active_field = false
-      setTimeout this.blur_test.bind(this), 100
+  container_mouseup: (evt) ->
+    this.results_reset(evt) if evt.target.nodeName is "ABBR"
 
   blur_test: (evt) ->
     this.close_field() if not @active_field and @container.hasClassName("chzn-container-active")
@@ -171,7 +157,6 @@ class Chosen
       this.close_field()
 
   results_build: ->
-    startTime = new Date()
     @parsing = true
     @results_data = root.SelectParser.select_to_array @form_field
 
@@ -180,6 +165,10 @@ class Chosen
       @choices = 0
     else if not @is_multiple
       @selected_item.down("span").update(@default_text)
+      if @form_field.options.length <= @disable_search_threshold
+        @container.addClassName "chzn-container-single-nosearch"
+      else
+        @container.removeClassName "chzn-container-single-nosearch"
 
     content = ''
     for data in @results_data
@@ -191,7 +180,9 @@ class Chosen
           this.choice_build data
         else if data.selected and not @is_multiple
           @selected_item.down("span").update( data.html )
+          this.single_deselect_control_build() if @allow_single_deselect
 
+    this.search_field_disabled()
     this.show_search_field_default()
     this.search_field_scale()
     
@@ -206,23 +197,6 @@ class Chosen
     else
       ""
   
-  result_add_option: (option) ->
-    if not option.disabled
-      option.dom_id = @container_id + "_o_" + option.array_index
-      
-      classes = if option.selected and @is_multiple then [] else ["active-result"]
-      classes.push "result-selected" if option.selected
-      classes.push "group-option" if option.group_array_index?
-      
-      '<li id="' + option.dom_id + '" class="' + classes.join(' ') + '">' + option.html + '</li>'
-    else
-      ""
-
-  results_update_field: ->
-    this.result_clear_highlight()
-    @result_single_selected = null
-    this.results_build()
-
   result_do_highlight: (el) ->
       this.result_clear_highlight()
 
@@ -245,12 +219,6 @@ class Chosen
     @result_highlight.removeClassName('highlighted') if @result_highlight
     @result_highlight = null
 
-  results_toggle: ->
-    if @results_showing
-      this.results_hide()
-    else
-      this.results_show()
-
   results_show: ->
     if not @is_multiple
       @selected_item.addClassName('chzn-single-with-drop')
@@ -324,8 +292,9 @@ class Chosen
 
   choice_destroy_link_click: (evt) ->
     evt.preventDefault()
-    @pending_destroy_click = true
-    this.choice_destroy evt.target
+    if not @is_disabled
+      @pending_destroy_click = true
+      this.choice_destroy evt.target
 
   choice_destroy: (link) ->
     @choices -= 1
@@ -336,17 +305,26 @@ class Chosen
     this.result_deselect link.readAttribute("rel")
     link.up('li').remove()
 
+  results_reset: (evt) ->
+    @form_field.options[0].selected = true
+    @selected_item.down("span").update(@default_text)
+    this.show_search_field_default()
+    evt.target.remove()
+    @form_field.simulate("change") if typeof Event.simulate is 'function'
+    this.results_hide() if @active_field
+  
   result_select: (evt) ->
     if @result_highlight
       high = @result_highlight
       this.result_clear_highlight()
 
-      high.addClassName("result-selected")
-      
       if @is_multiple
         this.result_deactivate high
       else
+        @search_results.descendants(".result-selected").invoke "removeClassName", "result-selected"
         @result_single_selected = high
+      
+      high.addClassName("result-selected")
         
       position = high.id.substr(high.id.lastIndexOf("_") + 1 )
       item = @results_data[position]
@@ -358,6 +336,7 @@ class Chosen
         this.choice_build item
       else
         @selected_item.down("span").update(item.html)
+        this.single_deselect_control_build() if @allow_single_deselect
 
       this.results_hide() unless evt.metaKey and @is_multiple
 
@@ -367,10 +346,10 @@ class Chosen
       this.search_field_scale()
 
   result_activate: (el) ->
-    el.addClassName("active-result").show()
+    el.addClassName("active-result")
 
   result_deactivate: (el) ->
-    el.removeClassName("active-result").hide()
+    el.removeClassName("active-result")
 
   result_deselect: (pos) ->
     result_data = @results_data[pos]
@@ -385,15 +364,11 @@ class Chosen
 
     @form_field.simulate("change") if typeof Event.simulate is 'function'
     this.search_field_scale()
-
-  results_search: (evt) ->
-    if @results_showing
-      this.winnow_results()
-    else
-      this.results_show()
+    
+  single_deselect_control_build: ->
+    @selected_item.down("span").insert { after: "<abbr class=\"search-choice-close\"></abbr>" } if @allow_single_deselect and not @selected_item.down("abbr")
 
   winnow_results: ->
-    startTime = new Date()
     this.no_results_clear()
 
     results = 0
@@ -434,7 +409,7 @@ class Chosen
 
             this.result_activate $(result_id)
 
-            $(@results_data[option.group_array_index].dom_id).show() if option.group_array_index?
+            $(@results_data[option.group_array_index].dom_id).setStyle({display: 'list-item'}) if option.group_array_index?
           else
             this.result_clear_highlight() if $(result_id) is @result_highlight
             this.result_deactivate $(result_id)
@@ -458,7 +433,7 @@ class Chosen
     if not @result_highlight
 
       if not @is_multiple
-        do_high = @search_results.down(".result-selected")
+        do_high = @search_results.down(".result-selected.active-result")
 
       if not do_high?
         do_high = @search_results.down(".active-result")
@@ -510,27 +485,6 @@ class Chosen
     @pending_backstroke.removeClassName("search-choice-focus") if @pending_backstroke
     @pending_backstroke = null
 
-  keyup_checker: (evt) ->
-    stroke = evt.which ? evt.keyCode
-    this.search_field_scale()
-
-    switch stroke
-      when 8
-        if @is_multiple and @backstroke_length < 1 and @choices > 0
-          this.keydown_backstroke()
-        else if not @pending_backstroke
-          this.result_clear_highlight()
-          this.results_search()
-      when 13
-        evt.preventDefault()
-        this.result_select(evt) if this.results_showing
-      when 27
-        this.results_hide() if @results_showing
-      when 9, 38, 40, 16, 91, 17
-        # don't do anything on these keys
-      else this.results_search()
-
-
   keydown_checker: (evt) ->
     stroke = evt.which ? evt.keyCode
     this.search_field_scale()
@@ -540,16 +494,21 @@ class Chosen
     switch stroke
       when 8
         @backstroke_length = this.search_field.value.length
+        break
       when 9
+        this.result_select(evt) if this.results_showing and not @is_multiple
         @mouse_on_container = false
+        break
       when 13
         evt.preventDefault()
+        break
       when 38
         evt.preventDefault()
         this.keyup_arrow()
+        break
       when 40
         this.keydown_arrow()
-
+        break
 
   search_field_scale: ->
     if @is_multiple

coffee/lib/abstract-chosen.coffee

@@ -0,0 +1,109 @@
+###
+Chosen source: generate output using 'cake build'
+Copyright (c) 2011 by Harvest
+###
+root = this
+
+class AbstractChosen
+
+  constructor: (@form_field, @options={}) ->
+    this.set_default_values()
+    
+    @is_multiple = @form_field.multiple
+    @default_text_default = if @is_multiple then "Select Some Options" else "Select an Option"
+
+    this.setup()
+
+    this.set_up_html()
+    this.register_observers()
+
+    this.finish_setup()
+
+  set_default_values: ->
+    @click_test_action = (evt) => this.test_active_click(evt)
+    @activate_action = (evt) => this.activate_field(evt)
+    @active_field = false
+    @mouse_on_container = false
+    @results_showing = false
+    @result_highlighted = null
+    @result_single_selected = null
+    @allow_single_deselect = if @options.allow_single_deselect? and @form_field.options[0]? and @form_field.options[0].text is "" then @options.allow_single_deselect else false
+    @disable_search_threshold = @options.disable_search_threshold || 0
+    @choices = 0
+    @results_none_found = @options.no_results_text or "No results match"
+
+  mouse_enter: -> @mouse_on_container = true
+  mouse_leave: -> @mouse_on_container = false
+
+  input_focus: (evt) ->
+    setTimeout (=> this.container_mousedown()), 50 unless @active_field
+  
+  input_blur: (evt) ->
+    if not @mouse_on_container
+      @active_field = false
+      setTimeout (=> this.blur_test()), 100
+
+  result_add_option: (option) ->
+    if not option.disabled
+      option.dom_id = @container_id + "_o_" + option.array_index
+
+      classes = if option.selected and @is_multiple then [] else ["active-result"]
+      classes.push "result-selected" if option.selected
+      classes.push "group-option" if option.group_array_index?
+      classes.push option.classes if option.classes != ""
+
+      style = if option.style.cssText != "" then " style=\"#{option.style}\"" else ""
+
+      '<li id="' + option.dom_id + '" class="' + classes.join(' ') + '"'+style+'>' + option.html + '</li>'
+    else
+      ""
+
+  results_update_field: ->
+    this.result_clear_highlight()
+    @result_single_selected = null
+    this.results_build()
+
+  results_toggle: ->
+    if @results_showing
+      this.results_hide()
+    else
+      this.results_show()
+
+  results_search: (evt) ->
+    if @results_showing
+      this.winnow_results()
+    else
+      this.results_show()
+
+  keyup_checker: (evt) ->
+    stroke = evt.which ? evt.keyCode
+    this.search_field_scale()
+
+    switch stroke
+      when 8
+        if @is_multiple and @backstroke_length < 1 and @choices > 0
+          this.keydown_backstroke()
+        else if not @pending_backstroke
+          this.result_clear_highlight()
+          this.results_search()
+      when 13
+        evt.preventDefault()
+        this.result_select(evt) if this.results_showing
+      when 27
+        this.results_hide() if @results_showing
+        return true
+      when 9, 38, 40, 16, 91, 17
+        # don't do anything on these keys
+      else this.results_search()
+
+  generate_field_id: ->
+    new_id = this.generate_random_id()
+    @form_field.id = new_id
+    new_id
+  
+  generate_random_char: ->
+    chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZ"
+    rand = Math.floor(Math.random() * chars.length)
+    newchar = chars.substring rand, rand+1
+
+root.AbstractChosen = AbstractChosen

coffee/lib/select-parser.coffee

@@ -34,6 +34,8 @@ class SelectParser
           selected: option.selected
           disabled: if group_disabled is true then group_disabled else option.disabled
           group_array_index: group_position
+          classes: option.className
+          style: option.style.cssText
       else
         @parsed.push
           array_index: @parsed.length

example.jquery.html

@@ -1064,7 +1064,7 @@
         <em>Single Select with Groups</em>
         <select data-placeholder="Your Favorite Football Team" style="width:350px;" class="chzn-select" tabindex="5">
           <option value=""></option>
-          <optgroup label="NFC East">
+          <optgroup label="NFC EAST">
             <option>Dallas Cowboys</option>
             <option>New York Giants</option>
             <option>Philadelphia Eagles</option>
@@ -1118,7 +1118,7 @@
         <em>Multiple Select with Groups</em>
         <select data-placeholder="Your Favorite Football Team" style="width:350px;" class="chzn-select" multiple tabindex="6">
           <option value=""></option>
-          <optgroup label="NFC East">
+          <optgroup label="NFC EAST">
             <option>Dallas Cowboys</option>
             <option>New York Giants</option>
             <option>Philadelphia Eagles</option>
@@ -1209,6 +1209,32 @@
       <code>&lt;select <strong>data-placeholder="Choose a country..."</strong> style="width:350px;" multiple class="chzn-select"&gt;</code>
       <p><strong>Note:</strong> on single selects, the first element is assumed to be selected by the browser. To take advantage of the default text support, you will need to include a blank option as the first element of your select list.</p>
     </div>
+    
+    <h2>No Results Text Support</h2>
+    <div class="side-by-side clearfix">
+      <p>Setting the "No results" search text is as easy as passing an option when you create Chosen:</p>
+      <code>
+        $(".chzn-select").chosen({no_results_text: "No results matched"});
+      </code>
+    </div>
+    
+    <h2>Allow Deselect on Single Selects</h2>
+    <div class="side-by-side clearfix">
+      <p>When a single select box isn't a required field, you can set <code>allow_single_deselect: true</code> and Chosen will add a UI element for option deselection. This will only work if the first option has blank text.</p>
+      <div class="side-by-side clearfix">
+        <select data-placeholder="Your Favorite Type of Bear" style="width:350px;" class="chzn-select-deselect" tabindex="7">
+          <option value=""></option>
+          <option>American Black Bear</option>
+          <option>Asiatic Black Bear</option>
+          <option>Brown Bear</option>
+          <option>Giant Panda</option>
+          <option selected>Sloth Bear</option>
+          <option>Sun Bear</option>
+          <option>Polar Bear</option>
+          <option>Spectacled Bear</option>
+        </select>
+      </div>
+    </div>
 
     <h2>Right to Left Support</h2>
     <div class="side-by-side clearfix">
@@ -1269,8 +1295,8 @@
     </ol>
     
   </div>
-  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></script>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
   <script src="chosen/chosen.jquery.js" type="text/javascript"></script>
-  <script type="text/javascript"> $(".chzn-select").chosen(); </script>
+  <script type="text/javascript"> $(".chzn-select").chosen(); $(".chzn-select-deselect").chosen({allow_single_deselect:true}); </script>
   </form>
 </body>

example.proto.html

@@ -1063,7 +1063,7 @@
         <em>Single Select with Groups</em>
         <select data-placeholder="Your Favorite Football Team" style="width:350px;" class="chzn-select" tabindex="5">
           <option value=""></option>
-          <optgroup label="NFC East">
+          <optgroup label="NFC EAST">
             <option>Dallas Cowboys</option>
             <option>New York Giants</option>
             <option>Philadelphia Eagles</option>
@@ -1117,7 +1117,7 @@
         <em>Multiple Select with Groups</em>
         <select data-placeholder="Your Favorite Football Team" style="width:350px;" class="chzn-select" multiple tabindex="6">
           <option value=""></option>
-          <optgroup label="NFC East">
+          <optgroup label="NFC EAST">
             <option>Dallas Cowboys</option>
             <option>New York Giants</option>
             <option>Philadelphia Eagles</option>
@@ -1209,6 +1209,32 @@
       <p><strong>Note:</strong> on single selects, the first element is assumed to be selected by the browser. To take advantage of the default text support, you will need to include a blank option as the first element of your select list.</p>
     </div>
 
+    <h2>No Results Text Support</h2>
+    <div class="side-by-side clearfix">
+      <p>Setting the "No results" search text is as easy as passing an option when you create Chosen:</p>
+      <code>
+        New Chosen($("chzn_select_field"),{no_results_text: "No results matched"});
+      </code>
+    </div>
+
+    <h2>Allow Deselect on Single Selects</h2>
+    <div class="side-by-side clearfix">
+      <p>When a single select box isn't a required field, you can set <code>allow_single_deselect: true</code> and Chosen will add a UI element for option deselection. This will only work if the first option has blank text.</p>
+      <div class="side-by-side clearfix">
+        <select data-placeholder="Your Favorite Type of Bear" style="width:350px;" class="chzn-select-deselect" tabindex="7">
+          <option value=""></option>
+          <option>American Black Bear</option>
+          <option>Asiatic Black Bear</option>
+          <option>Brown Bear</option>
+          <option>Giant Panda</option>
+          <option selected>Sloth Bear</option>
+          <option>Sun Bear</option>
+          <option>Polar Bear</option>
+          <option>Spectacled Bear</option>
+        </select>
+      </div>
+    </div>
+
     <h2>Right to Left Support</h2>
     <div class="side-by-side clearfix">
       <p>Chosen supports right to left select boxes too. just add <code>"chzn-rtl"</code> in addition to <code>"chzn-select"</code> to your select tags and you are good to go.</p>
@@ -1263,7 +1289,7 @@
     <p>Using Chosen is easy as can be.</p>
     <ol>
       <li>Download the plugin and copy the chosen files to your app.</li>
-      <li>Activate the plugin by creating a new instance of Chosen: New Chosen(<em>some_form_field</em>);</li>
+      <li>Activate the plugin by creating a new instance of Chosen: new Chosen(<em>some_form_field</em>);</li>
       <li><a href="http://youtu.be/pS-RsIzb78U?t=57s">Disco</a>.</li>
     </ol>
     
@@ -1282,6 +1308,11 @@
       select = selects[_i];
       _results.push(new Chosen(select));
     }
+    deselects = $$(".chzn-select-deselect");
+    for (_i = 0, _len = deselects.length; _i < _len; _i++) {
+      select = deselects[_i];
+      _results.push(new Chosen(select,{allow_single_deselect:true}));
+    }
     return _results;
   });
   </script>

package.json

@@ -0,0 +1,18 @@
+{
+  "author": "harvest",
+  "name": "chosen",
+  "version": "0.9.7",
+  "description": "Chosen is a JavaScript plugin that makes long, unwieldy select boxes much more user-friendly. It is currently available in both jQuery and Prototype flavors.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/harvesthq/chosen"
+  },
+  "engines": {
+    "node": ">=0.4.0"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "coffee-script": ">= 1.2",
+    "uglify-js": ">= 1.2.5"
+  }
+}