我正在使用 typeahead with bloodhound with a custom template和一个 Bootstrap css file .我的模板如上面第一个链接所示:
$(function() {
cropsSuggestionEngine.initialize();
$('#select-crop .typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
}, {
name: 'Gewassen',
displayKey: 'name',
source: cropsSuggestionEngine.ttAdapter(),
templates: {
empty: ['<div class="empty-message">','Niets gevonden...','</div>'].join('\n'),
suggestion: Handlebars.compile('<p><strong>{{name}}</strong> in {{category}}<br/>'
+ 'Ras: {{race}}.<br/>'
+ '<i>Groeitijd: {{growingTime}} maanden.</i><br/>'
+ '<input type="hidden" name="selected-crop-id" value={{id}}></p>')
}
});
});
不幸的是,模板中匹配的所有元素都被高亮显示,因为它们在被选中时获得了“tt-highlight”css 类。见:
在页面的 HTML 中会发生这种情况:
Groeitijd: 2 m
<strong class="tt-highlight">a</strong>
<strong class="tt-highlight">a</strong>
nden.
我不想在模板中对 Groeitijd: {{growingTime}}
部分进行高亮显示。我知道如何删除所有突出显示,但不知道如何删除模板中的特定部分。
有谁知道这是如何实现的?非常感谢。
最佳答案
通过在我不想高亮的部分添加一个类no-highlighting来修复它,如下:
<i class="no-highlighting">Groeitijd: {{growingTime}} maanden.</i><br/>
由于突出显示意味着在匹配的部分周围添加 strong
,我们通过添加以下 CSS 为该元素赋予非粗体外观:
.no-highlighting strong {
font-weight:normal;
}
关于twitter-bootstrap - 如何忽略部分模板以在 Typeahead.js 中突出显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28464977/