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

Question

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

  

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

Answer 2

mgadda的答案巧妙地解决了如何使用自定义数据扩充渲染项的问题。遗憾的是，一旦选择了某个项目，此元数据就不可用，因为bootstrap的select()方法使用从DOM获取的值调用您的updater()，而不是您加载的字符串：

var val = this.$menu.find('.active').attr('data-value');

解决此问题的一种方法是在highlighter()中设置DOM元素所需的元数据，然后在updater()中找到它们。由于我们只需要一个整数，我们为图像标记本身设置一个ID，在更新程序中，根据仍然可见的图像标记找到它：

$('.your_textboxes').typeahead({
  highlighter: function(item) {
    return('<img src="' + item.friend.img + '" id="klid_' + item.friend.id + '" />' + item);
  },
  updater: function(val) {
    var klid = $('ul.typeahead li.active:visible a img');
    if (klid && klid.length) {
      klid = klid[0].id.substr(5);
      // do stuff with metadata...
    }
    return(val);
}

需要更多元数据？在一个范围内包裹您的荧光笔，或添加一些隐藏的表单字段。

但这感觉很糟糕。如果有人有更清洁的解决方案，我很乐意看到它。

Answer 3

Typeahead期望从源回调传递到进程回调的所有内容都是一个字符串。不幸的是，这意味着您的荧光笔回调在它可以生成的HTML类型方面受到限制，因为您只能修改字符串。

但是，您可以定义源方法，使其返回通常的字符串对象数组，每个字符串对象都有一个额外的数据属性，其中包含在荧光笔中生成HTML所需的所有数据。

$('.typeahead').typeahead
  source: (query, processCallback)->
    $.get '/users', q: query, (data)->
      processCallback data.map (user)->
        item = new String("#{user.first_name} #{user.last_name}")
        item.data = user
        item

在这种形式中，item将作为字符串在typeahead的内部传递，当它最终到达您的自定义荧光笔时，您可以使用data属性来构建更复杂的html：

$('.typeahead').typeahead
  highlighter: (item)->
    "<img src=\"#{item.data.avatar_url}\" /> #{item}"