如何忽略 Typeahead.js 中突出显示的部分模板？

Question

我正在使用 typeahead with bloodhound with a custom template and a Bootstrap css file。我的模板与上面第一个 link 中的一样，如下所示：

$(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 class。参见：

并且在页面的 HTML 中发生了这种情况：

Groeitijd: 2 m
<strong class="tt-highlight">a</strong>
<strong class="tt-highlight">a</strong>
nden.

我不想对模板中的 Groeitijd: {{growingTime}} 部分进行突出显示。我知道如何删除所有突出显示，但不知道如何删除模板中的特定部分。

有人知道如何实现吗？非常感谢。

Answer 1

通过在不想高亮的部分添加class不高亮来修复，如下：

<i class="no-highlighting">Groeitijd: {{growingTime}} maanden.</i><br/>

并且由于突出显示意味着在匹配的部分周围添加 strong 我们通过添加以下 CSS:

使该元素具有非粗体外观

.no-highlighting strong {
    font-weight:normal;
}

如何忽略 Typeahead.js 中突出显示的部分模板？

How to ignore parts of template for highlighting in Typeahead.js?

twitter-bootstrap

typeahead.js

bloodhound