更改Bootstrap Typeahead的外观

Question

我一直在尝试使用bootstrap Typeahead 进行搜索。我已经能够使用Ajax获取dropdown list。但是，我想更改下拉列表的宽度以及内部的填充和基本背景颜色。哪个是白色的。我该怎么做？

另外，我希望它始终在下拉列表的末尾显示a -> "View All Results"，这样当用户点击它时，他就会被发送到搜索结果页面。

我已经能够成功，但我无法改变Dropdown的外观。而且，我希望View All不受搜索的影响，也不要在匹配时突出显示字符。

我该怎么改变它？这就是我目前所获得的。

请帮我改变下拉列表的外观。

Answer 1

更改下拉列表的外观非常简单，因为之前的答案建议您应该在Bootstrap CSS之后的文件中添加自定义样式，以确定需要使用哪些选择器来覆盖Bootstrap的样式我建议您使用浏览器的DOM检查工具。

现在棘手的部分是在结果的末尾添加自定义链接，我注意到将项添加到结果数组的最佳位置是render函数的开头，因为这个函数不同于在按照选项中设置的最大项目数对数组进行切片后调用sorter，事件render无法使用插件选项进行配置，因此您需要执行“手动”覆盖：< / p>

$('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
    };

然后，为防止链接突出显示为用户类型，您需要自定义默认的highlighter功能：

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>'
    });
}

最后，为了处理我们的自定义链接上的点击，我们需要实现一个updater函数，只要选择下拉列表中的选项，就会调用该函数

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

您可以查看 this fiddle 以获取完整的工作示例

Answer 2

您可以添加自定义CSS文件以设置Typeahead菜单的样式。

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

.typeahead li{
    padding: 5px;
}

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

确保在bootstrap.css文件之后包含自定义样式表。