1

我正在使用（嗯，想使用）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
});

从返回的 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"
                }
            ]
        }
    ]
}

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

超级小工具
疯狂小工具

Acme Widgets
Extra Super Widget
Double Super Widget

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

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

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

4

1 回答 1

1

我不认为你想要做的事情可能是你想要的。

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

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

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

2）放弃每组标题的想法，而是让建议下拉列表中的每一行由 组成"{{#brand}} -- {{#model}}"，并对filter:.

于 2013-10-10T06:55:26.597 回答