如何自定义Bootstrap typeahead布局/功能不仅仅是文本？ [英] How to customize Bootstrap typeahead layout/function for more than just text?

问题描述

我正在为我的网站开发搜索功能，而我正在使用Bootstrap的typeahead来显示结果。到现在为止还挺好。但我想要的是扩展功能，以便我可以添加图像和其他项目，比如描述等。根据这篇文章，这是可能的：方法：

  $（'。typeahead'）。typeahead（{
 highlighter：function（item）{
 return< div> .......< / div> ; 
} 
}）; 
  

用于突出显示自动完成结果的方法。接受单个
参数项，并具有typeahead实例的范围。应该
返回html。

I'm working on a search functionality for my website and I'm using Bootstrap's typeahead to show the results. So far so good. But what I want is to extend the function so that I could add an image and some other item, say description, etc. According to this post, that is possible: custom typeahead.

Basically I need something like this as each result item:

<div class="resultContainer">
  <div class="resultImage"><img /></div>
  <div class="resultDesc"></div>
  <div class="resultLabel"></div>
</div>

Now it's:

<li><a href="#"></a></li>

And this doesn't even work with a longer text than the width of the typeahead. So the text doesn't go to the next line and hence doesn't fit the <li>. How can I use the the custom layout I want? (btw I have an array of arrays of results. Each sub-array contains img, desc, etc.). This is what I have right now:

Thanks in advance.

解决方案

Use the highlighter method:

$('.typeahead').typeahead({
    highlighter: function(item){
        return "<div>.......</div>";
    }
});

Method used to highlight autocomplete results. Accepts a single argument item and has the scope of the typeahead instance. Should return html.

这篇关于如何自定义Bootstrap typeahead布局/功能不仅仅是文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！