Twitter typeahead.js - сгруппированные результаты с шаблоном Hogan?

Question

Я использую (ну, хотел бы использовать) typeahead.js, чтобы выполнить поиск в моей базе данных по торговой марке и модели одновременно и отобразить результаты, сгруппированные по торговой марке. Я думал, что могу использовать простой шаблон Усы, чтобы выполнить это, но мне не повезло.

Моя текущая конфигурация машинописный:

myEl.typeahead({ 
    "name": "models-by-brand", 
    "valueKey": "id", 
    "remote": "/search/%QUERY", 
    "template": '{{#brands}}' + 
     '<h4>{{brand_name}}</h4>' + 
     '{{#models}}' + 
     '<p><a href="#" class="pick-model" data-modelid="{{id}}">{{name}}</a></p>' + 
     '{{/models}}' + 
     '{{/brands}}', 
    "engine": Hogan 
}); 

JSON вернулся из /search/super:

{ 
    "brands": [ 
     { 
      "brand_name": "Super Widgets", 
      "models": [ 
       { 
        "id": 1, 
        "name": "Crazy Widget" 
       } 
      ] 
     }, 
     { 
      "brand_name": "Acme Widgets", 
      "models": [ 
       { 
        "id": 2, 
        "name": "Extra Super Widget" 
       }, 
       { 
        "id": 2, 
        "name": "Double Super Widget" 
       } 
      ] 
     } 
    ] 
} 

Я хочу, чтобы выходной машинописный быть сгруппированы по брэнду и выбираются по имени модели Thusly:

Super Widgets
Crazy Widget

Acme Widgets
Extra Super Widget
Double Super Widget

Но, видимо, я не могу использовать Hogan шаблоны с машинописным таким способом (с вложенными блоками). Typeahead отображает только один результат без текста.

Я попытался использовать функцию фильтра с пультом для форматирования каждой базы данных, но это позволило мне получить только плоский список всех данных - я не мог понять, как сгруппировать результаты.

Является ли это возможным с помощью шаблонов typeahead? Я просто пропустил что-то действительно очевидное? У меня есть контроль над удаленным результатом JSON, поэтому я могу изменить этот формат, если мне нужно. Спасибо за любую помощь.

Answer 1

Я не думаю, что вы пытаетесь сделать это так, как вы этого хотите.

Вы можете приблизиться, используя filter:, сортируя результат и создавая «фиктивные» данные для заголовков. У вас будет шаблон, который сделал бы эти заголовки некорректным CSS-классом. Но это все равно будет падать: заголовки будут считаться частью результатов limit:, например. И хотя они не могут быть интерактивными, их можно будет выбрать с помощью клавиатуры.

Есть 2 обходные пути я могу думать:

1) Если у вас есть небольшое количество брендов, определяющие набор данных для каждого. Это будет означать несколько remote. Каждый набор данных может иметь свои собственные заголовки. Но опять же это возможно только для небольшого количества брендов. Если бренды меняются, клиент может получить список брендов и программно создать наборы данных.

2) Откажитесь от идеи заголовка на группу, и вместо этого каждая строка в раскрывающемся списке предложений будет состоять из "{{#brand}} -- {{#model}}" и отсортировать их в filter:.