From c4e681f675e4ebe5ef58cfc393ca6012c02b7a52 Mon Sep 17 00:00:00 2001
From: Igor Vaynberg <igor.vaynberg@gmail.com>
Date: Tue, 17 Jul 2012 20:07:58 +0300
Subject: [PATCH] added an example of a custom matcher that uses the option tag

---
 select2-latest.html | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/select2-latest.html b/select2-latest.html
index db8776dc..623a37f9 100755
--- a/select2-latest.html
+++ b/select2-latest.html
@@ -778,6 +778,16 @@ $("#e16_disable").click(function() { $("#e16,#e16_2").select2("disable"); });
               $(document).ready(function () {
 $("#e17").select2({
       matcher: function(term, text) { return text.toUpperCase().indexOf(term.toUpperCase())==0; }
+});
+// <select id="e17_2" style="width:300px">
+//     <option alt="pink">red</option>
+//     <option alt="cyan">blue</option>
+// </select>
+$("#e17_2").select2({
+   matcher: function(term, text, opt) {
+       return text.toUpperCase().indexOf(term.toUpperCase())>=0
+           || opt.attr("alt").toUpperCase().indexOf(term.toUpperCase())>=0;
+   }
 });
               });
           </script>
@@ -785,6 +795,8 @@ $("#e17").select2({
               <h3>Custom Matcher</h3>
                <p>Unlike other dropdowns on this page, this one matches options only if the term appears in the beginning of the string as opposed to anywhere</p>
               <p><select id="e17" style="width:300px"><option value="AL" selected>Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select><br/></p>
+              <p>The dropdown below matches on custom attributes of the <code>option</code> tag. For example, the `blue` option can be matched by entering either `blue` or `cyan`.</p>
+              <p><select id="e17_2" style="width:300px"><option alt="pink">red</option><option alt="cyan">blue</option></select></p>
           </div>
           <div class="span8">
               <h3>Example Code</h3>