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

Question

我正在为我的网站开发搜索功能,而我正在使用Bootstrap的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(),而不是加载的String:

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}"