Question

感谢您对此问题的帮助：Typeahead result formatting，这是一个后续行动。

我的JSON看起来像

[{ name="Long Island", type="2", id="1234"}, { name="New York", type="1", id="5678"}]

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

输入第1个标题

输入1项

输入1项*

第2类标题

输入第2项

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

这是否可以使用typeahead和模板引擎？我正在使用Hogan，但我并不挑剔。

Answer 1

“Typeahead”这样做的方法是将数据集分成2个数据集，一个只返回“类型1”项，另一个只返回“类型2”项。在预先输入中，每个数据集都可以有自己的header，其行为将完全符合您的需要。

$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
}])

Answer 2

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

选项1

使用2个数据集，使用相同的查询。在其中一个中，filter只返回“类型1”条目，而另一个filter只返回“类型2”答案。

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

这是一个hackish解决方案，但OTOH干净（客户端方面），并且只需要很少的代码。

选项2

仅使用1个数据集，因此有些数据集可以在filter中使用。基本上，返回一个数组，其中包含“类型1”标题的条目，然后是所有类型1条目，然后是“类型2”标题的条目，然后是所有类型2条目。

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

1）让您的模板包含课程。 2）让你的CSS让你的课程无法选择，不可点击，并按照你想要的方式设计。

我更喜欢选项＃1。

Typeahead模板，if / else

2 个答案: