javascript - 如何为不仅仅是文本自定义 Bootstrap typeahead 布局/功能？

Question

我正在为我的网站开发一个搜索功能，我正在使用 Bootstrap 的预输入来显示结果。到目前为止，一切都很好。但我想要的是扩展功能，以便我可以添加图像和其他一些元素，比如描述等。根据这篇文章，这是可能的:custom typeahead .

基本上我需要这样的东西作为每个结果项:

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

现在是:

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

这甚至不适用于比预先输入的宽度更长的文本。所以文本不会转到下一行，因此不适合 <li> .如何使用我想要的自定义布局？ (顺便说一句，我有一个结果数组。每个子数组包含 img、desc 等)。这就是我现在所拥有的:

提前致谢。

Answer 1

使用 highlighter方法:

$('.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.