<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>
<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>
<pre class="prettyprint linenums">
<input type="text" data-provide="typeahead">
</pre>
+ <h3>Methods</h3>
+ <h4>.typeahead(options)</h4>
+ <p>Initializes an input with a typahead.</p>
</div>
</div>
</section>
<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>
<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>
<pre class="prettyprint linenums">
<input type="text" data-provide="typeahead">
</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
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
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)
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
}
, 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