2015-02-11 48 views
2

我使用的是typeahead with bloodhound with a custom template和Bootstrap css file。我的模板是如上述這樣看的第一個鏈接:如何忽略Typeahead.js中突出顯示的部分模板?

$(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-亮點」 CSS類選擇它們時。請參閱:

the problem with highlighting

而且在這種情況頁面的HTML:

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

我不希望這highligting在模板Groeitijd: {{growingTime}}部分。我知道如何刪除所有突出顯示,但不知道模板中的某個特定部分。

有誰知道這是如何實現的?非常感謝。

回答

3

通過添加類沒有突出來,我不想突出部分固定,如下所示:

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

和自凸顯手段將圍繞我們給這個元件的非匹配部分strong通過添加以下CSS來查看外觀:

.no-highlighting strong { 
    font-weight:normal; 
} 
相關問題