第一個TypeAhead.js建議的不同模板？

Question

我正在嘗試更改TypeAhead.js的實現，因此第一個建議的呈現方式與所有其他建議略有不同。

基本上，我想為第一個建議提供2個類別建議，但其余部分則不行。

這是我解析JSON並將其格式化的代碼段。

$(document).ready(function() {        
    $('.typeahead-preview .typeahead').typeahead({
        name: 'search-terms',
        prefetch: 'search-terms.json',
        template: [
            '<dl><dt>{{value}}</dt><dd>{{value}} in {{category-1}}</dd><dd>{{value}} in {{category-2}}</dd></dl>'
        ].join(''),
        engine: Hogan
    });
});

謝謝。

Answer 1

由於Typeahead.js提出了建議， <div>類的元素tt-suggestion ，所有內含有<span>帶班tt-suggestions你可以使用標准的CSS來唯一樣式的第一個建議，例如：

    .tt-suggestion {
        /* styles for regular suggestions */
    }

    .tt-suggestion:first-child {
        /* additional or replacement styles for first suggestion */
    }

Answer 2

例如，我可能要顯示第一個建議的{{category-1}}和{{category-2}}值，但其余所有都不顯示。

您可以通過執行Stephen Thomas的建議來實現（我的代表不夠高，無法在同一線程上發表評論）。

在您的模板中，將一個類放在要隱藏的事物上：

<dl><dt>{{value}}</dt><dd class="usually_hidden">{{value}} in {{category-1}}</dd><dd class="usually_hidden>{{value}} in {{category-2}}</dd></dl>

然后在您的CSS中：

.usually_hidden {
    display: none;
}
.tt-suggestion:first-child .usually_hidden {
    display: inline;
}