Merge pull request #10 from JJJ/issue/2904

Issue/2904

coffee/chosen.jquery.coffee

@@ -303,12 +303,18 @@ class Chosen extends AbstractChosen
     if @form_field_label.length > 0
       @form_field_label.on 'click.chosen', this.label_click_handler
 
+  set_search_field_placeholder: ->
+    if @is_multiple and this.choices_count() < 1
+      @search_field.attr('placeholder', @default_text)
+    else
+      @search_field.attr('placeholder', '')
+
   show_search_field_default: ->
+    @search_field.val('')
+    do @set_search_field_placeholder
     if @is_multiple and this.choices_count() < 1 and not @active_field
-      @search_field.val(@default_text)
       @search_field.addClass "default"
     else
-      @search_field.val("")
       @search_field.removeClass "default"
 
   search_results_mouseup: (evt) ->
@@ -355,6 +361,7 @@ class Chosen extends AbstractChosen
 
       link.parents('li').first().remove()
 
+      do @set_search_field_placeholder
       this.search_field_scale()
 
   results_reset: ->
@@ -523,7 +530,7 @@ class Chosen extends AbstractChosen
       style_block[style] = @search_field.css(style)
 
     div = $('<div />').css(style_block)
-    div.text this.get_search_field_value()
+    div.text @get_search_field_value() || @search_field.attr('placeholder')
     $('body').append div
 
     width = div.width() + 25

coffee/chosen.proto.coffee

@@ -314,12 +314,18 @@ class @Chosen extends AbstractChosen
     if @form_field_label?
       @form_field_label.observe "click", this.label_click_handler
 
+  set_search_field_placeholder: ->
+    if @is_multiple and this.choices_count() < 1
+      @search_field.placeholder = @default_text
+    else
+      @search_field.placeholder = ''
+
   show_search_field_default: ->
+    @search_field.value = ""
+    do @set_search_field_placeholder
     if @is_multiple and this.choices_count() < 1 and not @active_field
-      @search_field.value = @default_text
       @search_field.addClassName "default"
     else
-      @search_field.value = ""
       @search_field.removeClassName "default"
 
   search_results_mouseup: (evt) ->
@@ -366,6 +372,7 @@ class @Chosen extends AbstractChosen
 
       link.up('li').remove()
 
+      do @set_search_field_placeholder
       this.search_field_scale()
 
   results_reset: ->
@@ -539,7 +546,7 @@ class @Chosen extends AbstractChosen
     for style in styles
       style_block[style] = @search_field.getStyle(style)
 
-    div = new Element('div').update(this.escape_html(this.get_search_field_value()))
+    div = new Element('div').update(this.escape_html(this.get_search_field_value() || @search_field.placeholder))
     # CSP without 'unsafe-inline' doesn't allow setting the style attribute directly
     div.setStyle(style_block)
     document.body.appendChild(div)

coffee/lib/abstract-chosen.coffee

@@ -353,7 +353,7 @@ class AbstractChosen
     """
       <ul class="chosen-choices">
         <li class="search-field">
-          <input class="chosen-search-input" type="text" autocomplete="off" value="#{@default_text}" aria-expanded="false" aria-haspopup="true" role="combobox" aria-autocomplete="list" />
+          <input class="chosen-search-input" type="text" autocomplete="off" placeholder="#{@default_text}" aria-expanded="false" aria-haspopup="true" role="combobox" aria-autocomplete="list" />
         </li>
       </ul>
       <div class="chosen-drop">

sass/chosen.scss

@@ -227,7 +227,6 @@ $chosen-sprite-retina: url('[email protected]') !default;
         border: 0 !important;
         background: transparent !important;
         box-shadow: none;
-        color: #999;
         font-size: 100%;
         font-family: sans-serif;
         line-height: normal;
@@ -321,9 +320,6 @@ $chosen-sprite-retina: url('[email protected]') !default;
   .chosen-choices {
     border: 1px solid #5897fb;
     box-shadow: 0 0 5px rgba(#000,.3);
-    li.search-field input[type="text"] {
-      color: #222 !important;
-    }
   }
 }
 /* @end */