3

カスタム テンプレートと Bootstrap css fileを使用して、bloodhound で typeahead を使用しています。私のテンプレートは、上記の最初のリンクにあるように、次のようになります。

$(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}}。すべての強調表示を削除する方法は知っていますが、テンプレートの特定の部分については知りません。

これをどのように達成できるか知っている人はいますか？どうもありがとう。

4

1 に答える 1

4

次のように、強調表示したくない部分にクラスの強調表示を追加して修正しました。

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

強調表示とはstrong、一致した部分の周りに追加することを意味するため、次の CSS を追加して、この要素を太字ではない外観にしました。

.no-highlighting strong {
    font-weight:normal;
}
于 2015-02-13T13:05:33.550 に答える