Twitter typeahead.js - 使用 Hogan 模板分组结果？

Question

我正在使用（好吧，想使用）typeahead.js 同时按 brand name 和 model name 搜索我的数据库，并显示按以下方式分组的可选结果品牌。我以为我可以使用一个简单的 Mustache 模板来完成此操作，但我没有任何运气。

我当前的预输入配置：

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

从/search/super返回的JSON：

{
    "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"
                }
            ]
        }
    ]
}

我希望预先输入的输出按品牌名称分组，因此可以按型号名称选择：

超级小部件
Crazy Widget

Acme 小部件
Extra Super Widget
Double Super Widget

但显然我不能以这种方式（使用嵌套块）使用带有预输入的 Hogan 模板。 Typeahead 只显示一个没有文本的结果。

我尝试使用带有遥控器的过滤器功能来格式化每个数据，但这只能让我得到所有数据的平面列表 - 我无法弄清楚如何对结果进行分组。

预输入模板可以实现我想要的吗？我只是错过了一些非常明显的东西吗？我可以控制远程 JSON 结果，因此如果需要，我可以更改该格式。感谢您的帮助。

Answer 1

我认为您尝试做的事情不可能如您所愿。

您可以通过确实使用filter:、对结果进行排序并为品牌标题创建“虚拟”数据来接近。您将拥有一个模板，使这些标题成为一些不可点击的 CSS 类。但这仍然不够：例如，标题将被视为limit: 结果的一部分。虽然它们可能无法点击，但仍然可以使用键盘进行选择。

我能想到两种解决方法：

1) 如果您的品牌数量较少，请为每个品牌定义一个数据集。这将意味着多个remote。每个数据集都可以有自己的标题。但同样，这仅适用于少数品牌。如果品牌发生变化，客户可以获得品牌列表并以编程方式创建数据集。

2) 放弃每组标题的想法，而是让建议下拉列表中的每一行由"{{#brand}} -- {{#model}}"组成，并在filter:中进行排序。