rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

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

Browse Source
This commit is contained in:
Jacob Thornton 2012-01-28 13:16:05 -08:00
parent f768242759
commit 6935f693b3
4 changed files with 48 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/assets/css/bootstrap.css vendored
View File

@ -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 {

12
docs/javascript.html
View File

@ -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>

12
docs/templates/pages/javascript.mustache vendored
View File

@ -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>

43
js/bootstrap-typeahead.js vendored
View File

@ -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