Различные шаблоны для 1-го предложения 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}} для первого предложения, но ни один из остальных.

То, о чем вы просите, возможно, выполняя то, что предложил Стивен Томас (мой представитель недостаточно высоко, чтобы комментировать одну и ту же тему).

В шаблоне, поставить класс на вещи, чтобы скрыть:

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