改变Bootstrap Typeahead的外观 [英] Changing the look of the Bootstrap Typeahead

问题描述

我一直在尝试使用引导 Typeahead 进行搜索。我可以使用Ajax获取下拉列表。但是，我想要更改下拉列表的宽度以及其内部的填充和基本背景颜色。这是白色的。我怎么做？

另外，我希望它总是显示 a - > 查看所有结果，以便当用户点击它时，他会被发送到搜索结果页面。

我已经可以做到了，但是我一直无法改变Dropdown的外观。而且，我希望View All不受搜索的影响，并且不会在匹配时突出显示字符。

我会如何更改它？这是我目前正在得到的。

请帮我改变下拉菜单的样子。 解决方案

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

现在棘手的部分是在结果的末尾添加自定义链接，我注意到将项目追加到results数组在 render 函数的开头，因为这个函数不像 sorter 在数组切片到在选项中设置的项目的最大数量，事情是 render 不能使用插件选项进行配置，因此您需要（'input'）。typeahead（）。data（'typeahead'）。 render = function（items）{
var that = this
items.push（'View All'）; //追加查看所有选项

//其余的是从引导的js源获取的默认渲染函数
items = $（items）.map（function（i，item）{
i = $（that.options.item）.attr（'data-value'，item）
i.find（'a'）。html（that.highlighter（item））
返回i [0]
}）

items.first（）。addClass（'active'）
this。$ menu.html（items）
return this
};

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



  highlighter：function（item）{
 // If如果（item =='View All'）
 return'< strong>'+ item +'< / strong>'
 $，那么这是我们的链接，而不是仅返回粗体
的文本b $ b //其余的是默认的hightlighter函数，取自bootstrap的js源代码
 var query = this.query.replace（/ [\ -\ [\] {}（）* +？。， \\\\ $ $ |＃\s] / g，'\\ $&'）
 return item.replace（new RegExp（'（'+ query +'）'，' ig'），函数（$ 1，match）{
 return'< strong>'+ match +'< / strong>'
}）; 
} 
  

最后，要处理点击我们的自定义链接，我们需要实现一个<$



  updater：code> updater 函数在选择下拉列表中的选项时被调用。函数（item）{
 if（item =='View All'）{
 //处理单击我们的链接
 window.location ='http://example.com/search？ q ='+ this。$ element.val（）; 
} 
退货项目; 
} 
  

您可以检查 这个小提琴 一个完整的工作示例

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.

解决方案

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

这篇关于改变Bootstrap Typeahead的外观的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！