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}}值，但其余都不显示。

你所要求的是斯蒂芬托马斯所建议的，（我的代表不够高，无法评论同一个帖子）。

在你的模板中，将一个类放在要隐藏的东西上：

<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;
}

第一个TypeAhead.js建议的不同模板？

2 个答案: