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

Question

I'm using typeahead with bloodhound with a custom template and a Bootstrap css file. My template is as in the first link above looking like this:

$(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>')
        }
    }); 

});

What unfortunately happens is that all elements that match in the template get higlighted since they get the 'tt-highlight' css class when they are selected. See:

And in the HTML of the page this happens:

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

I do not want this highligting for the Groeitijd: {{growingTime}} part in the template. I know how to remove all highlighting, but not for one specific part in a template.

Does anyone know how this can be accomplished? Many thanks.

Answer 1

Fixed it by adding a class no-highlighting to the parts that I did not want to highlight, as follows:

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

and since highlighting means adding strong around the matched parts we gave this element a non-bold look by adding the following CSS:

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