5

我一直在尝试使用引导程序Typeahead进行搜索。我已经能够dropdown list使用 Ajax。但是，我想更改下拉菜单的宽度以及其中的填充和基本背景颜色。哪个是白色的。我该怎么做？

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

我已经做到了，但我无法改变下拉菜单的外观。而且，我希望查看全部不受搜索影响，并且在匹配时不突出显示字符。

我将如何改变它？这就是我目前得到的。

在此处输入图像描述

请帮我改变下拉菜单的外观。

4

2 回答 2

7

更改下拉列表的外观非常简单，因为前面的答案建议您应该将自定义样式添加到 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;
}

您可以查看此小提琴以获取完整的工作示例

于 2013-08-29T05:37:43.640 回答
0

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

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

.typeahead li{
    padding: 5px;
}

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

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

于 2013-08-28T17:56:40.137 回答