Created by: gcoop
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.
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]
}
})