如何自定义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屋!