To easily change the appearance of the dropdown, you can follow the suggestion in the previous answer by adding custom styles in a file that comes after Bootstrap CSS. To identify which selectors to use for overriding Bootstrap's styles, it is recommended to utilize your browser's DOM inspection tools.
Adding a custom link at the end of the results poses a challenge. One approach is to append an item to the results array at the beginning of the render function. This particular function seems ideal because unlike the sorter, it is called after the array is sliced at the maximum number of items set in the options. However, since render cannot be configured with plugin options, a manual override is necessary:
$('input').typeahead().data('typeahead').render = function (items) {
var that = this
items.push('View All'); // Add "View All" option
// Default render function taken from Bootstrap's JS source
items = $(items).map(function (i, item) {
i = $(that.options.item).attr('data-value', item)
i.find('a').html(that.highlighter(item))
return i[0]
})
items.first().addClass('active')
this.$menu.html(items)
return this
};
To prevent the custom link from being highlighted as users type, customization of the default highlighter function is required:
highlighter: function (item) {
if (item == 'View All')
return '<strong>' + item + '</strong>'
// Default highlighter function taken from Bootstrap's JS source
var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')
return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
return '<strong>' + match + '</strong>'
});
}
To handle clicks on the custom link, an updater function needs to be implemented whenever an option from the dropdown is selected:
updater:function(item){
if(item == 'View All'){
window.location = 'http://example.com/search?q=' + this.$element.val();
}
return item;
}
A complete working example can be found in this fiddle