diff --git a/docs/javascript.html b/docs/javascript.html
index d489241157..53130bd16f 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -1353,7 +1353,7 @@ $('.myCarousel').carousel({
              <tr>
                <th style="width: 100px;">Name</th>
                <th style="width: 50px;">type</th>
-               <th style="width: 50px;">default</th>
+               <th style="width: 90px;">default</th>
                <th>description</th>
              </tr>
             </thead>
@@ -1370,6 +1370,18 @@ $('.myCarousel').carousel({
                <td>8</td>
                <td>The max number of items to display in the dropdown.</td>
              </tr>
+             <tr>
+               <td>matcher</td>
+               <td>function</td>
+               <td>case sensitive</td>
+               <td>The method used to determine if a query matches an item. Accepts a single argument, the <code>item</code> against which to test the query. Access the current query with <code>this.query</code>. Return a boolean <code>true</code> if query is a match.</td>
+             </tr>
+             <tr>
+               <td>sorter</td>
+               <td>function</td>
+               <td>no sort</td>
+               <td>Method used to sort autocomplete results. Accepts a single argument <code>items</code> and has the scope of the typeahead instance. Reference the current query with <code>this.query</code>.</td>
+             </tr>
             </tbody>
           </table>
 
@@ -1378,6 +1390,9 @@ $('.myCarousel').carousel({
 <pre class="prettyprint linenums">
 &lt;input type="text" data-provide="typeahead"&gt;
 </pre>
+          <h3>Methods</h3>
+          <h4>.typeahead(options)</h4>
+          <p>Initializes an input with a typahead.</p>
         </div>
       </div>
     </section>
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index 9113c1776f..3c7a3b101f 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -1288,7 +1288,7 @@ $('.myCarousel').carousel({
              <tr>
                <th style="width: 100px;">{{_i}}Name{{/i}}</th>
                <th style="width: 50px;">{{_i}}type{{/i}}</th>
-               <th style="width: 50px;">{{_i}}default{{/i}}</th>
+               <th style="width: 90px;">{{_i}}default{{/i}}</th>
                <th>{{_i}}description{{/i}}</th>
              </tr>
             </thead>
@@ -1305,6 +1305,18 @@ $('.myCarousel').carousel({
                <td>8</td>
                <td>{{_i}}The max number of items to display in the dropdown.{{/i}}</td>
              </tr>
+             <tr>
+               <td>{{_i}}matcher{{/i}}</td>
+               <td>{{_i}}function{{/i}}</td>
+               <td>case sensitive</td>
+               <td>{{_i}}The method used to determine if a query matches an item. Accepts a single argument, the <code>item</code> against which to test the query. Access the current query with <code>this.query</code>. Return a boolean <code>true</code> if query is a match.{{/i}}</td>
+             </tr>
+             <tr>
+               <td>{{_i}}sorter{{/i}}</td>
+               <td>{{_i}}function{{/i}}</td>
+               <td>no sort</td>
+               <td>{{_i}}Method used to sort autocomplete results. Accepts a single argument <code>items</code> and has the scope of the typeahead instance. Reference the current query with <code>this.query</code>.{{/i}}</td>
+             </tr>
             </tbody>
           </table>
 
@@ -1313,6 +1325,9 @@ $('.myCarousel').carousel({
 <pre class="prettyprint linenums">
 &lt;input type="text" data-provide="typeahead"&gt;
 </pre>
+          <h3>{{_i}}Methods{{/i}}</h3>
+          <h4>.typeahead({{_i}}options{{/i}})</h4>
+          <p>{{_i}}Initializes an input with a typahead.{{/i}}</p>
         </div>
       </div>
     </section>
\ No newline at end of file
diff --git a/js/bootstrap-typeahead.js b/js/bootstrap-typeahead.js
index b4d839c936..39331816e8 100644
--- a/js/bootstrap-typeahead.js
+++ b/js/bootstrap-typeahead.js
@@ -24,6 +24,8 @@
   var Typeahead = function ( element, options ) {
     this.$element = $(element)
     this.options = $.extend({}, $.fn.typeahead.defaults, options)
+    this.matcher = this.options.matcher
+    this.sorter = this.options.sorter
     this.$menu = $(this.options.menu).appendTo('body')
     this.source = this.options.source
     this.shown = false
@@ -34,11 +36,6 @@
 
     constructor: Typeahead
 
-  , matcher: function (item, query) {
-      // ;_; http://jsperf.com/asdfdfasdfa
-      return ~item.toLowerCase().indexOf(query)
-    }
-
   , select: function () {
       var val = this.$menu.find('.active').attr('data-value')
       this.$element.val(val)
@@ -77,12 +74,12 @@
         return this.shown ? this.hide() : this
       }
 
-      q = this.query.toLowerCase()
-
-      items = jQuery.grep(this.source, function (item) {
-        if (that.matcher(item, q)) return item
+      items = $.grep(this.source, function (item) {
+        if (that.matcher(item)) return item
       })
 
+      items = this.sorter(items)
+
       if (!items.length) {
         return this.shown ? this.hide() : this
       }
@@ -233,6 +230,12 @@
   , items: 8
   , menu: '<ul class="typeahead dropdown-menu"></ul>'
   , item: '<li><a href="#"></a></li>'
+  , matcher: function (item) {
+      return ~item.indexOf(this.query)
+    }
+  , sorter: function (items) {
+      return items
+    }
   }
 
   $.fn.typeahead.Constructor = Typeahead