Question

我正在使用（好，想使用）typeahead.js同时按品牌名称和模型名称搜索我的数据库，并显示按以下方式分组的可选结果品牌。我以为我可以用一个简单的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 Widgets
Extra Super Widget
Double Super Widget

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

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

我希望使用typeahead模板吗？我只是缺少一些非常明显的东西吗？我可以控制远程JSON结果，所以如果需要，我可以更改该格式。感谢您的帮助。

Answer 1

我认为你想要做的事情可能就像你想要的那样。

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

我能想到的解决方法有两种：

1）如果您拥有少量品牌，请为每个品牌定义一个数据集。这意味着多个remote。每个数据集都可以有自己的标题。但同样，这对少数品牌来说是可行的。如果品牌发生变化，客户可以获得品牌列表并以编程方式创建数据集。

2）放弃每个组头的想法，而是让建议下拉列表中的每一行都由"{{#brand}} -- {{#model}}"组成，并对filter:中的那些进行排序。

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

1 个答案: