From 2a8bd04b93b206d69ff6702790485b6416d19438 Mon Sep 17 00:00:00 2001
From: Allen Bargi <allen.bargi@gmail.com>
Date: Thu, 28 Jul 2011 22:33:14 +0200
Subject: [PATCH] using data-placeholder instead of title attribute

---
 chosen/chosen.jquery.js     |  2 +-
 chosen/chosen.proto.js      |  2 +-
 coffee/chosen.jquery.coffee |  4 ++--
 coffee/chosen.proto.coffee  |  2 +-
 example.html                | 20 ++++++++++----------
 example.jquery.html         | 20 ++++++++++----------
 6 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/chosen/chosen.jquery.js b/chosen/chosen.jquery.js
index e13eabc..64436bc 100644
--- a/chosen/chosen.jquery.js
+++ b/chosen/chosen.jquery.js
@@ -46,7 +46,7 @@
       this.container_id = this.form_field.id.length ? this.form_field.id.replace('.', '_') : this.generate_field_id();
       this.container_id += "_chzn";
       this.f_width = this.form_field_jq.width();
-      this.default_text = this.form_field_jq.attr('title') ? this.form_field_jq.attr('title') : this.default_text_default;
+      this.default_text = this.form_field_jq.data('placeholder') ? this.form_field_jq.data('placeholder') : this.default_text_default;
       container_div = $("<div />", {
         id: this.container_id,
         "class": 'chzn-container',
diff --git a/chosen/chosen.proto.js b/chosen/chosen.proto.js
index 1588041..627bcf8 100644
--- a/chosen/chosen.proto.js
+++ b/chosen/chosen.proto.js
@@ -42,7 +42,7 @@
         'class': 'chzn-container',
         '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('data-placeholder') ? this.form_field.readAttribute('data-placeholder') : this.default_text_default;
       base_template = this.is_multiple ? new Element('div', container_props).update(this.multi_temp.evaluate({
         "default": this.default_text
       })) : new Element('div', container_props).update(this.single_temp.evaluate({
diff --git a/coffee/chosen.jquery.coffee b/coffee/chosen.jquery.coffee
index 3369e8a..e46a063 100644
--- a/coffee/chosen.jquery.coffee
+++ b/coffee/chosen.jquery.coffee
@@ -15,7 +15,7 @@ $.fn.extend({
     $(this).each((input_field) ->
       new Chosen(this, data, options) unless ($ this).hasClass "chzn-done"
     )
-})
+}) 
 
 class Chosen
 
@@ -48,7 +48,7 @@ class Chosen
     
     @f_width = @form_field_jq.width()
     
-    @default_text = if @form_field_jq.attr 'title' then @form_field_jq.attr 'title' else @default_text_default
+    @default_text = if @form_field_jq.data 'placeholder' then @form_field_jq.data 'placeholder' else @default_text_default
     
     container_div = ($ "<div />", {
       id: @container_id
diff --git a/coffee/chosen.proto.coffee b/coffee/chosen.proto.coffee
index f73cac0..b997a4f 100644
--- a/coffee/chosen.proto.coffee
+++ b/coffee/chosen.proto.coffee
@@ -50,7 +50,7 @@ class Chosen
       'class': 'chzn-container'
       '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 'title' then @form_field.readAttribute 'title' else @default_text_default
+    @default_text = if @form_field.readAttribute 'data-placeholder' then @form_field.readAttribute 'data-placeholder' else @default_text_default
     
     base_template = if @is_multiple then new Element('div', container_props).update( @multi_temp.evaluate({ "default": @default_text}) ) else new Element('div', container_props).update( @single_temp.evaluate({ "default":@default_text }) )
 
diff --git a/example.html b/example.html
index 970f1ce..225d170 100644
--- a/example.html
+++ b/example.html
@@ -58,7 +58,7 @@
     <div class="side-by-side clearfix">
       <div>
         <em>Turns This</em>
-        <select title="Choose a Country..." style="width:350px;" tabindex="1">
+        <select data-placeholder="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> 
@@ -306,7 +306,7 @@
       </div>
       <div>
         <em>Into This</em>        
-        <select title="Choose a Country..." class="chzn-select" style="width:350px;" tabindex="2">
+        <select data-placeholder="Choose a Country..." class="chzn-select" style="width:350px;" tabindex="2">
           <option value=""></option> 
           <option value="United States">United States</option> 
           <option value="United Kingdom">United Kingdom</option> 
@@ -559,7 +559,7 @@
     <div class="side-by-side clearfix">
       <div>
         <em>Turns This</em>
-        <select title="Choose a Country..." style="width:350px;" multiple tabindex="3">
+        <select data-placeholder="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> 
@@ -807,7 +807,7 @@
       </div>
       <div>
         <em>Into This</em>        
-        <select title="Choose a Country..." class="chzn-select" multiple style="width:350px;" tabindex="4">
+        <select data-placeholder="Choose a Country..." class="chzn-select" multiple style="width:350px;" tabindex="4">
           <option value=""></option> 
           <option value="United States">United States</option> 
           <option value="United Kingdom">United Kingdom</option> 
@@ -1060,7 +1060,7 @@
     <div class="side-by-side clearfix">
       <div>
         <em>Single Select with Groups</em>
-        <select title="Your Favorite Football Team" style="width:350px;" class="chzn-select" tabindex="5">
+        <select data-placeholder="Your Favorite Football Team" style="width:350px;" class="chzn-select" tabindex="5">
           <option value=""></option>
           <optgroup label="NFC East">
             <option>Dallas Cowboys</option>
@@ -1114,7 +1114,7 @@
       </div>
       <div>
         <em>Multiple Select with Groups</em>
-        <select title="Your Favorite Football Team" style="width:350px;" class="chzn-select" multiple tabindex="6">
+        <select data-placeholder="Your Favorite Football Team" style="width:350px;" class="chzn-select" multiple tabindex="6">
           <option value=""></option>
           <optgroup label="NFC East">
             <option>Dallas Cowboys</option>
@@ -1173,7 +1173,7 @@
       <p>Chosen automatically highlights selected options and removes disabled options.</p>
       <div>
         <em>Single Select</em>
-        <select title="Your Favorite Type of Bear" style="width:350px;" class="chzn-select" tabindex="7">
+        <select data-placeholder="Your Favorite Type of Bear" style="width:350px;" class="chzn-select" tabindex="7">
           <option value=""></option>
           <option>American Black Bear</option>
           <option>Asiatic Black Bear</option>
@@ -1187,7 +1187,7 @@
       </div>
       <div>
         <em>Multiple Select with Groups</em>
-        <select title="Your Favorite Types of Bear" style="width:350px;" multiple class="chzn-select" tabindex="8">
+        <select data-placeholder="Your Favorite Types of Bear" style="width:350px;" multiple class="chzn-select" tabindex="8">
           <option value=""></option>
           <option>American Black Bear</option>
           <option>Asiatic Black Bear</option>
@@ -1203,8 +1203,8 @@
 
     <h2>Default Text Support</h2>
     <div class="side-by-side clearfix">
-      <p>Chosen automatically sets the default field text ("Choose a country...") by reading the select element's title value. If no title value is present, it will default to "Select Some Option" or "Select Some Options" depending on whether the select is single or multiple. You can change these elements in the plugin js file as you see fit.</p>
-      <code>&lt;select <strong>title="Choose a country..."</strong> style="width:350px;" multiple class="chzn-select"&gt;</code>
+      <p>Chosen automatically sets the default field text ("Choose a country...") by reading the select element's data-placeholder value. If no data-placeholder value is present, it will default to "Select Some Option" or "Select Some Options" depending on whether the select is single or multiple. You can change these elements in the plugin js file as you see fit.</p>
+      <code>&lt;select <strong>data-placeholder="Choose a country..."</strong> style="width:350px;" multiple class="chzn-select"&gt;</code>
     </div>
     
     <h2>Change / Update Events</h2>
diff --git a/example.jquery.html b/example.jquery.html
index 8117d61..ad8cf3d 100644
--- a/example.jquery.html
+++ b/example.jquery.html
@@ -58,7 +58,7 @@
     <div class="side-by-side clearfix">
       <div>
         <em>Turns This</em>
-        <select title="Choose a Country..." style="width:350px;" tabindex="1">
+        <select data-placeholder="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> 
@@ -306,7 +306,7 @@
       </div>
       <div>
         <em>Into This</em>        
-        <select title="Choose a Country..." class="chzn-select" style="width:350px;" tabindex="2">
+        <select data-placeholder="Choose a Country..." class="chzn-select" style="width:350px;" tabindex="2">
           <option value=""></option> 
           <option value="United States">United States</option> 
           <option value="United Kingdom">United Kingdom</option> 
@@ -559,7 +559,7 @@
     <div class="side-by-side clearfix">
       <div>
         <em>Turns This</em>
-        <select title="Choose a Country..." style="width:350px;" multiple tabindex="3">
+        <select data-placeholder="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> 
@@ -807,7 +807,7 @@
       </div>
       <div>
         <em>Into This</em>        
-        <select title="Choose a Country..." class="chzn-select" multiple style="width:350px;" tabindex="4">
+        <select data-placeholder="Choose a Country..." class="chzn-select" multiple style="width:350px;" tabindex="4">
           <option value=""></option> 
           <option value="United States">United States</option> 
           <option value="United Kingdom">United Kingdom</option> 
@@ -1060,7 +1060,7 @@
     <div class="side-by-side clearfix">
       <div>
         <em>Single Select with Groups</em>
-        <select title="Your Favorite Football Team" style="width:350px;" class="chzn-select" tabindex="5">
+        <select data-placeholder="Your Favorite Football Team" style="width:350px;" class="chzn-select" tabindex="5">
           <option value=""></option>
           <optgroup label="NFC East">
             <option>Dallas Cowboys</option>
@@ -1114,7 +1114,7 @@
       </div>
       <div>
         <em>Multiple Select with Groups</em>
-        <select title="Your Favorite Football Team" style="width:350px;" class="chzn-select" multiple tabindex="6">
+        <select data-placeholder="Your Favorite Football Team" style="width:350px;" class="chzn-select" multiple tabindex="6">
           <option value=""></option>
           <optgroup label="NFC East">
             <option>Dallas Cowboys</option>
@@ -1173,7 +1173,7 @@
       <p>Chosen automatically highlights selected options and removes disabled options.</p>
       <div>
         <em>Single Select</em>
-        <select title="Your Favorite Type of Bear" style="width:350px;" class="chzn-select" tabindex="7">
+        <select data-placeholder="Your Favorite Type of Bear" style="width:350px;" class="chzn-select" tabindex="7">
           <option value=""></option>
           <option>American Black Bear</option>
           <option>Asiatic Black Bear</option>
@@ -1187,7 +1187,7 @@
       </div>
       <div>
         <em>Multiple Select with Groups</em>
-        <select title="Your Favorite Types of Bear" style="width:350px;" multiple class="chzn-select" tabindex="8">
+        <select data-placeholder="Your Favorite Types of Bear" style="width:350px;" multiple class="chzn-select" tabindex="8">
           <option value=""></option>
           <option>American Black Bear</option>
           <option>Asiatic Black Bear</option>
@@ -1203,8 +1203,8 @@
 
     <h2>Default Text Support</h2>
     <div class="side-by-side clearfix">
-      <p>Chosen automatically sets the default field text ("Choose a country...") by reading the select element's title value. If no title value is present, it will default to "Select Some Option" or "Select Some Options" depending on whether the select is single or multiple. You can change these elements in the plugin js file as you see fit.</p>
-      <code>&lt;select <strong>title="Choose a country..."</strong> style="width:350px;" multiple class="chzn-select"&gt;</code>
+      <p>Chosen automatically sets the default field text ("Choose a country...") by reading the select element's data-placeholder value. If no data-placeholder value is present, it will default to "Select Some Option" or "Select Some Options" depending on whether the select is single or multiple. You can change these elements in the plugin js file as you see fit.</p>
+      <code>&lt;select <strong>data-placehoder="Choose a country..."</strong> style="width:350px;" multiple class="chzn-select"&gt;</code>
     </div>
 
     <h2>Change / Update Events</h2>