javascript - Changing the look of the Bootstrap Typeahead - Stack Overflow

admin管理员组

文章数量:1278825

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.

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.

• javascript
• jquery
• html
• css
• twitter-bootstrap

Share Improve this question Follow edited Aug 28, 2013 at 16:45 Vaibs_Cool 6,16066 gold badges3030 silver badges6161 bronze badges asked Aug 28, 2013 at 16:39 Sankalp SinghaSankalp Singha 4,54666 gold badges4040 silver badges6060 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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 remend 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./search?q=' + this.$element.val();
    }
    return item;
}

You can check this fiddle for a plete working example

You can add a custom CSS file to style the Typeahead menu.

.typeahead{
    background-color: #fff;
    min-width: 250px;
}

.typeahead li{
    padding: 5px;
}

.typeahead li.active{
    background-color: #eee;
}

make sure to include your custom style sheet after the bootstrap.css file.

本文标签： javascriptChanging the look of the Bootstrap TypeaheadStack Overflow