Javascript 提前键入模板，如果/否则

感谢您对这个问题的帮助：，这是一个后续问题

我的JSON看起来像

[{name=“Long Island”，type=“2”，id=“1234”}，{name=“New York”，type=“1”，id=“5678”}]

在下拉列表中，我需要能够区分类型1和类型2，所以

类型1标题

第1类项目

第1类项目*

类型2标题

第2类项目

第2类项目

如果类型1没有结果，则不显示标题。类型2也一样

使用typeahead和模板引擎可以实现这一点吗？我正在使用Hogan，但我并不挑剔。

这样做的“Typeahead”方法是将数据集分为两个数据集，一个只返回“type 1”项，另一个只返回“type 2”项。在typeahead中，每个数据集都可以有自己的

标题

，其行为完全符合您的要求

$autocomplete.typeahead([{
    name: 'location 1',
    remote: {
        url: 'http://pathtomysite.com/%QUERY?type=1',
        dataType: 'jsonp',
        valueKey: 'name'
        filter: function (parsedResponse) { return parsedResponse.locations; }
    },
    template: [
        '<p class="repo-name">{{name}}</p>',
        '<p class="repo-description">{{id}}</p>'
    ].join(''),
    header: '<b>Type 1</b>'
    engine: Hogan
}, {
    name: 'location 2',
    remote: {
        url: 'http://pathtomysite.com/%QUERY??type=2',
        dataType: 'jsonp',
        valueKey: 'name'
        filter: function (parsedResponse) { return parsedResponse.locations; }
    },
    template: [
        '<p class="repo-name">{{name}}</p>',
        '<p class="repo-description">{{id}}</p>'
    ].join(''),
    header: '<b>Type 2</b>'
    engine: Hogan
}])

$autocomplete.typeahead([{
名称：“位置1”，
远程：{
网址：'http://pathtomysite.com/%QUERY?type=1',
数据类型：“jsonp”，
valueKey:'名称'
筛选器：函数（parsedResponse）{return parsedResponse.locations；}
},
模板：[
“
{{name}
”，
“
{{id}
”
].加入（“”），
标题：“类型1”
引擎：霍根
}, {
名称：“位置2”，
远程：{
网址：'http://pathtomysite.com/%QUERY??type=2',
数据类型：“jsonp”，
valueKey:'名称'
筛选器：函数（parsedResponse）{return parsedResponse.locations；}
},
模板：[
“
{{name}
”，
“
{{id}
”
].加入（“”），
标题：“类型2”
引擎：霍根
}])

鉴于您无法控制JSON部分，您有两个选项：

选项1

使用两个数据集，使用相同的查询。在其中一种情况下，

过滤器

仅返回“类型1”条目，而在另一种情况下，

过滤器

仅返回“类型2”答案

这是对JSON调用的两倍，因此服务器上的负载增加了两倍。但是，客户端不会看到延迟，因为查询是并发的

这是一个黑客式的解决方案，但它是干净的（客户端），并且只需要很少的代码

选项2

仅使用1个数据集，因此在

过滤器中可以使用一些数据集。基本上，返回一个数组，其中包含“type 1”头的条目，然后是所有type 1条目，然后是“type 2”头的条目，然后是所有type 2条目

数组是一个对象数组。每个对象还将有一个
类
成员。在“类型1”和“类型2”标题的条目中，将类设置为
“header”
或类似的内容，并且：

1） 让你的模板包含这个类。
2） 让您的CSS使类不可选择、不可链接，并按照您想要的方式设置样式

$autocomplete.typeahead([{
    name: 'location 1',
    remote: {
        url: 'http://pathtomysite.com/%QUERY?type=1',
        dataType: 'jsonp',
        valueKey: 'name'
        filter: function (parsedResponse) { return parsedResponse.locations; }
    },
    template: [
        '<p class="repo-name">{{name}}</p>',
        '<p class="repo-description">{{id}}</p>'
    ].join(''),
    header: '<b>Type 1</b>'
    engine: Hogan
}, {
    name: 'location 2',
    remote: {
        url: 'http://pathtomysite.com/%QUERY??type=2',
        dataType: 'jsonp',
        valueKey: 'name'
        filter: function (parsedResponse) { return parsedResponse.locations; }
    },
    template: [
        '<p class="repo-name">{{name}}</p>',
        '<p class="repo-description">{{id}}</p>'
    ].join(''),
    header: '<b>Type 2</b>'
    engine: Hogan
}])

我更喜欢选项#1。
这不起作用，因为它意味着对JSON的额外查询，我根本无法控制。有几个解决方法，我会在靠近PC时编写更多。请注意，上面的代码适用于v0.10.x之前的Typeahead.js版本