Changing the look of the Bootstrap Typeahead

Question

I have been trying to make a search using the bootstrap Typeahead. I have been able to get the dropdown list using Ajax. However, I want to change the width of the dropdown and also the padding inside it and the basic background color. Which is white. How do I do it?

Also, I want it to always show a -> "View All Results" in the end of the dropdown so that when the user clicks it, he would be sent to the search results page.

I have been able to make it, but I have not been able to change the look of the Dropdown. And also, I want the View All to be unaffected by the search and not to highlight characters when they match.

How would I change it? This is what I am getting currently.

Please help me change the look of the dropdown.

Answer 1

Changing the look of the dropdown is pretty easy, as the previous answer suggests you should add your custom styles in a file included after the Bootstrap CSS, to identify which selectors you need to use in order to override Bootstrap's styles I recommend you use your browser's DOM inspection tools.

Now the tricky part is adding that custom link at the end of the results, I noticed that the best place to append an item to the results array was at the beginning of the render function because this function, unlike sorter is called after the array is sliced at the max number of items set in the options, the thing is render is not configurable with the plugin options so you need to do a "manual" override:

$('input').typeahead().data('typeahead').render = function (items) {
      var that = this
      items.push('View All'); //Append "View All option"

      //The rest is the 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
    };

Then to prevent the link from highlighting as the users types you need to customize the default highlighter function:

highlighter: function (item) {
    //If it's our link than just return the text in bold
    if (item == 'View All') 
        return '<strong>' + item + '</strong>'

    //The rest is the default hightlighter 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>'
    });
}

Finally to handle the click on our custom link we need to implement an updater function to be called whenever an option from the dropdown is selected

updater:function(item){
    if(item == 'View All'){
        //Handle click on our link
        window.location = 'http://example.com/search?q=' + this.$element.val();
    }
    return item;
}

You can check this fiddle for a complete working example