14

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

提前致谢。

4

3 回答 3

12

使用highlighter方法：

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

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

于 2012-06-03T20:03:17.510 回答
10

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

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

解决此问题的一种方法是将所需的元数据设置为 DOM 元素highlighter()，然后在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);
}

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

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

于 2012-10-17T16:57:55.600 回答
8

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}"
于 2012-09-17T22:53:25.007 回答