如何为不仅仅是文本自定义 Bootstrap 预输入布局/功能？答案

【问题标题】：How to customize Bootstrap typeahead layout/function for more than just text?如何为不仅仅是文本自定义 Bootstrap 预输入布局/功能？
【发布时间】：2012-06-03 19:33:42
【问题描述】：

我正在为我的网站开发搜索功能，我正在使用 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 等）。这就是我现在所拥有的：

提前致谢。

【问题讨论】：

标签： javascript html css twitter-bootstrap

【解决方案2】：

mgadda 的回答巧妙地解决了如何使用自定义数据增强渲染项目的问题。不幸的是，一旦选择了一个项目，这个元数据就不再可用，因为引导程序的 select() 方法调用您的 updater() ，其值取自 DOM，而不是您加载的字符串：

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);
}

需要更多元数据？将荧光笔包裹在一个跨度中，或添加一些隐藏的表单字段。

不过，这感觉很笨拙。如果有人有更清洁的解决方案，我很乐意看到它。

【讨论】：

【解决方案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}"

【讨论】：

我不确定您希望我如何以不同的方式格式化此咖啡脚本。
很确定我从来没有登陆过这个解决方案！将项目创建为字符串对象非常聪明。
这个解决方案效果很好。欣赏它，伙计！