typahead does case insensitive matching with simple sorter + accepts highlighter option

4 files changed, 48 insertions, 21 deletions

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 2fddd8f41..cc58533a0 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -1983,7 +1983,7 @@ table .span12 {
 .navbar-search .search-query :-moz-placeholder {
   color: #eeeeee;
 }
-.navbar-search .search-query ::-webkit-input-placeholder {
+.navbar-search .search-query::-webkit-input-placeholder {
   color: #eeeeee;
 }
 .navbar-search .search-query:hover {
diff --git a/docs/javascript.html b/docs/javascript.html
index f1ce98658..a35b44dd3 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -1362,7 +1362,7 @@ $('.myCarousel').carousel({
              <tr>
                <th style="width: 100px;">Name</th>
                <th style="width: 50px;">type</th>
-               <th style="width: 90px;">default</th>
+               <th style="width: 100px;">default</th>
                <th>description</th>
              </tr>
             </thead>
@@ -1382,15 +1382,21 @@ $('.myCarousel').carousel({
              <tr>
                <td>matcher</td>
                <td>function</td>
-               <td>case sensitive</td>
+               <td>case insensitive</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>exact match,<br> case sensitive,<br> case insensitive</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>
+             <tr>
+               <td>highlighter</td>
+               <td>function</td>
+               <td>highlights all default matches</td>
+               <td>Method used to highlight autocomplete results. Accepts a single argument <code>item</code> and has the scope of the typeahead instance. Should return html.</td>
+             </tr>
             </tbody>
           </table>
 
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index 46420660a..cba75ac08 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -1297,7 +1297,7 @@ $('.myCarousel').carousel({
              <tr>
                <th style="width: 100px;">{{_i}}Name{{/i}}</th>
                <th style="width: 50px;">{{_i}}type{{/i}}</th>
-               <th style="width: 90px;">{{_i}}default{{/i}}</th>
+               <th style="width: 100px;">{{_i}}default{{/i}}</th>
                <th>{{_i}}description{{/i}}</th>
              </tr>
             </thead>
@@ -1317,15 +1317,21 @@ $('.myCarousel').carousel({
              <tr>
                <td>{{_i}}matcher{{/i}}</td>
                <td>{{_i}}function{{/i}}</td>
-               <td>case sensitive</td>
+               <td>{{_i}}case insensitive{{/i}}</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}}exact match,<br> case sensitive,<br> case insensitive{{/i}}</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>
+             <tr>
+               <td>{{_i}}highlighter{{/i}}</td>
+               <td>{{_i}}function{{/i}}</td>
+               <td>{{_i}}highlights all default matches{{/i}}</td>
+               <td>{{_i}}Method used to highlight autocomplete results. Accepts a single argument <code>item</code> and has the scope of the typeahead instance. Should return html.{{/i}}</td>
+             </tr>
             </tbody>
           </table>
 
diff --git a/js/bootstrap-typeahead.js b/js/bootstrap-typeahead.js
index 39331816e..1426185af 100644
--- a/js/bootstrap-typeahead.js
+++ b/js/bootstrap-typeahead.js
@@ -24,8 +24,9 @@
   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.matcher = this.options.matcher || this.matcher
+    this.sorter = this.options.sorter || this.sorter
+    this.highlighter = this.options.highlighter || this.highlighter
     this.$menu = $(this.options.menu).appendTo('body')
     this.source = this.options.source
     this.shown = false
@@ -87,17 +88,37 @@
       return this.render(items.slice(0, this.options.items)).show()
     }
 
+  , matcher: function (item) {
+      return ~item.toLowerCase().indexOf(this.query.toLowerCase())
+    }
+
+  , sorter: function (items) {
+      var beginswith = []
+        , caseSensitive = []
+        , caseInsensitive = []
+        , item
+
+      while (item = items.shift()) {
+        if (!item.toLowerCase().indexOf(this.query.toLowerCase())) beginswith.push(item)
+        else if (~item.indexOf(this.query)) caseSensitive.push(item)
+        else caseInsensitive.push(item)
+      }
+
+      return beginswith.concat(caseSensitive, caseInsensitive)
+    }
+
+  , highlighter: function (item) {
+      return item.replace(new RegExp('(' + this.query + ')', 'ig'), function ($1, match) {
+        return '<strong>' + match + '</strong>'
+      })
+    }
+
   , render: function (items) {
       var that = this
-        , QUERY = new RegExp('(' + this.query + ')', 'ig')
 
       items = $(items).map(function (i, item) {
         i = $(that.options.item).attr('data-value', item)
-
-        i.find('a').html(item.replace(QUERY, function ($1, match) {
-          return '<strong>' + match + '</strong>'
-        }))
-
+        i.find('a').html(that.highlighter(item))
         return i[0]
       })
 
@@ -230,12 +251,6 @@
   , 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