更改Bootstrap Typeahead的外观

Question

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

此外,我希望它始终显示a -> "View All Results"在下拉列表的末尾,以便当用户单击它时,他将被发送到搜索结果页面.

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

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

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

Answer 1

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

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

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

您可以查看这个小提琴,找到一个完整的工作示例