twitter/bootstrap — pull request #4025 by gcoop (2012-07-07 15:53:31+00:00)
Title: Typeahead render method.

Exposed typeahead render method so you can override it and customise the list html based on the type of object returned from a custom source. You need this if you want to produce something like the [new twitter search/autocomplete](http://www.engadget.com/2012/07/06/twitter-brings-search-autocomplete-to-the-web/).

Changed .next() to use .nextAll(':has(a):first') so you can have <li class="divider"></li> separating result types.

#### Example ####

var labels
, mapped
$("input").typeahead({
source: function (query, process) {
$.get('/autocomplete', { q: query }, function (data) {
labels = []
mapped = {}

$.each(data, function (i, item) {
mapped[item.label] = item.value
labels.push(item.label)
})

process(labels)
})
},
render: function () {
var that = this

items = $(mapped).map(function (i, item) {
i = $(that.options.item).attr('data-value', item)

if (item.thumb) { // Ok object has a thumbnail.
i.find('a').append(''+that.highlighter(item));
} else {
i.find('a').html(that.highlighter(item))
}

return i[0]
})

items.first().addClass('active')
this.$menu.html(items)
},
updater: function (item) {
return mapped[item]
}
})