如何定制Bootstrap typeahead布局/功能，而不仅仅是文本？
我正在为我的网站开发一个搜索功能，我正在使用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>这甚至不适用于比typeahead宽度更长的文本。因此，文本不会转到下一行，因此不适合<li>。如何使用我想要的自定义布局？(顺便说一下，我有一个结果数组的数组。每个子阵列包含img、desc等)。这就是我现在所拥有的：
提前谢谢。
回答 2
Stack Overflow用户
发布于 2012-10-18 00:57:56
mgadda的回答巧妙地解决了如何使用自定义数据增强呈现项的问题。不幸的是，一旦选择了一个项目，这个元数据就不再可用，因为bootstrap的select()方法使用从DOM获取的值调用updater()，而不是使用加载的字符串：
var val = this.$menu.find('.active').attr('data-value');一种解决方法是在highlighter()中设置DOM元素所需的元数据，然后在updater()中找到它们。因为我们只需要一个整数，所以我们为图像标签本身设置了一个ID，并在updater中，根据仍然可见的图像标签找到它：
$('.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);
}需要更多元数据吗？将荧光笔包裹在跨度内，或添加一些隐藏的表单域。
不过，这感觉有点乱七八糟。如果有人有更干净的解决方案，我很乐意看到。
Stack Overflow用户
发布于 2012-09-18 06:53:25
Typeahead期望从源回调传递到流程回调的所有内容都是一个字符串。不幸的是，这意味着您的荧光笔回调在某种程度上受到它所能生成的HTML类型的限制，因为您只能修改这么多字符串。
但是，您可以定义源方法，使其返回通常的string对象数组，每个string对象都有一个附加的data属性，其中包含在荧光笔中生成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}"https://stackoverflow.com/questions/10873312
复制相似问题