From 2054fd987091f53c5abb1d9d5c8236e30be22f37 Mon Sep 17 00:00:00 2001
From: Emanuele Gaspari <emanuele.gaspari@copiaincolla.com>
Date: Fri, 29 Jun 2012 22:12:07 +0200
Subject: [PATCH 1/3] added 'add reference to original option element' in doc

---
 index.html | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/index.html b/index.html
index 6954635c..6ff3cd8a 100755
--- a/index.html
+++ b/index.html
@@ -25,6 +25,7 @@ version: 2.1
 <script id="script_e4">
     $(document).ready(function() {
         function format(state) {
+        	// original <option> or <optgroup> element is accessible by property state.element
             return "<img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png'/>" + state.text;
         }
         $("#e4").select2({
@@ -340,6 +341,21 @@ version: 2.1
     <div class="span8">
         <h3>Example Code</h3>
         <pre class="prettyprint linenums" id="code_e4"></pre>
+        <p>
+            You can set <code>data-</code> attributes to &lt;option&gt; (or &lt;optgroup&gt;) and use them inside temptlating functions:
+        </p>
+        <pre class="prettyprint linenums">
+            &lt;select&gt;
+                &lt;option value="0" data-foo="bar"&gt;option one&lt;/option&gt;
+                ...
+            &lt;/select&gt;
+        </pre>
+        <pre class="prettyprint linenums">
+            function format(state) {
+                var originalOption = state.element
+                return "&lt;img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png' alt='" + originalOption.data('foo') + "' /&gt;" + state.text;
+            }
+        </pre>
     </div>
 </article>
 
@@ -773,6 +789,14 @@ version: 2.1
         <tr><td>&lt;returns&gt;</td><td>string</td><td>Html that represents the selection</td></tr>
     </table>
     The default implementation expects the object to have a <code>text</code> property that is returned.
+    <br>
+    Original &lt;option&gt; (or &lt;optgroup&gt;) element is accessible inside the specified function by property item.element
+    <pre>
+        format(item) {
+            var originalOption = item.element;
+            // return item.text
+        }
+    </pre>
 </td></tr>
 <tr><td>formatResult</td><td>function</td><td>
     Function used to render a result that the user can select.
@@ -783,6 +807,14 @@ version: 2.1
         <tr><td>&lt;returns&gt;</td><td>string</td><td>Html that represents the result</td></tr>
     </table>
     The default implementation expects the object to have a <code>text</code> property that is returned.
+    <br>
+    Original &lt;option&gt; (or &lt;optgroup&gt;) element is accessible inside the specified function by property item.element
+    <pre>
+        format(item) {
+            var originalOption = item.element;
+            // return item.text
+        }
+    </pre>
 </td></tr>
 <tr><td>formatNoMatches</td><td>function</td><td>
     Function used to render the &quot;No matches&quot; message

From feba7892ac82078a570a6c7c56e5e0b8c34798f8 Mon Sep 17 00:00:00 2001
From: Emanuele Gaspari <emanuele.gaspari@copiaincolla.com>
Date: Fri, 29 Jun 2012 22:22:23 +0200
Subject: [PATCH 2/3] added 'add reference to original option element' in doc

---
 index.html | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 6ff3cd8a..5c5337f4 100755
--- a/index.html
+++ b/index.html
@@ -342,7 +342,7 @@ version: 2.1
         <h3>Example Code</h3>
         <pre class="prettyprint linenums" id="code_e4"></pre>
         <p>
-            You can set <code>data-</code> attributes to &lt;option&gt; (or &lt;optgroup&gt;) and use them inside temptlating functions:
+            You can set <code>data-</code> attributes to <code>&lt;option&gt;</code> (or <code>&lt;optgroup&gt;</code>) and use them inside temptlating functions:
         </p>
         <pre class="prettyprint linenums">
             &lt;select&gt;
@@ -352,7 +352,8 @@ version: 2.1
         </pre>
         <pre class="prettyprint linenums">
             function format(state) {
-                var originalOption = state.element
+                var originalOption = state.element;
+                
                 return "&lt;img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png' alt='" + originalOption.data('foo') + "' /&gt;" + state.text;
             }
         </pre>
@@ -789,8 +790,8 @@ version: 2.1
         <tr><td>&lt;returns&gt;</td><td>string</td><td>Html that represents the selection</td></tr>
     </table>
     The default implementation expects the object to have a <code>text</code> property that is returned.
-    <br>
-    Original &lt;option&gt; (or &lt;optgroup&gt;) element is accessible inside the specified function by property item.element
+    <br><br>
+    Original <code>&lt;option&gt;</code> (or <code>&lt;optgroup&gt;</code>) element is accessible inside the specified function by property <code>item.element</code>:
     <pre>
         format(item) {
             var originalOption = item.element;
@@ -807,8 +808,8 @@ version: 2.1
         <tr><td>&lt;returns&gt;</td><td>string</td><td>Html that represents the result</td></tr>
     </table>
     The default implementation expects the object to have a <code>text</code> property that is returned.
-    <br>
-    Original &lt;option&gt; (or &lt;optgroup&gt;) element is accessible inside the specified function by property item.element
+    <br><br>
+    Original <code>&lt;option&gt;</code> (or <code>&lt;optgroup&gt;</code>) element is accessible inside the specified function by property <code>item.element</code>:
     <pre>
         format(item) {
             var originalOption = item.element;

From 4c1358a8cf30548efa02fadb776e5d9ef77746f2 Mon Sep 17 00:00:00 2001
From: Emanuele Gaspari <emanuele.gaspari@copiaincolla.com>
Date: Fri, 29 Jun 2012 22:25:01 +0200
Subject: [PATCH 3/3] added 'add reference to original option element' in doc

---
 index.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 5c5337f4..d6982649 100755
--- a/index.html
+++ b/index.html
@@ -342,7 +342,7 @@ version: 2.1
         <h3>Example Code</h3>
         <pre class="prettyprint linenums" id="code_e4"></pre>
         <p>
-            You can set <code>data-</code> attributes to <code>&lt;option&gt;</code> (or <code>&lt;optgroup&gt;</code>) and use them inside temptlating functions:
+            You can set <code>data-</code> attributes to <code>&lt;option&gt;</code> (or &lt;optgroup&gt;) and use them inside temptlating functions:
         </p>
         <pre class="prettyprint linenums">
             &lt;select&gt;
@@ -791,7 +791,7 @@ version: 2.1
     </table>
     The default implementation expects the object to have a <code>text</code> property that is returned.
     <br><br>
-    Original <code>&lt;option&gt;</code> (or <code>&lt;optgroup&gt;</code>) element is accessible inside the specified function by property <code>item.element</code>:
+    Original <code>&lt;option&gt;</code> (or &lt;optgroup&gt;) element is accessible inside the specified function through the property <code>item.element</code>:
     <pre>
         format(item) {
             var originalOption = item.element;
@@ -809,7 +809,7 @@ version: 2.1
     </table>
     The default implementation expects the object to have a <code>text</code> property that is returned.
     <br><br>
-    Original <code>&lt;option&gt;</code> (or <code>&lt;optgroup&gt;</code>) element is accessible inside the specified function by property <code>item.element</code>:
+    Original <code>&lt;option&gt;</code> (or &lt;optgroup&gt;) element is accessible inside the specified function through the property <code>item.element</code>:
     <pre>
         format(item) {
             var originalOption = item.element;