0

感谢您对这个问题的帮助：Typeahead 结果格式，这是后续行动。

我的 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 相同。

这可以通过预输入和模板引擎实现吗？我正在使用 Hogan，但我并不挑剔。

4

2 回答 2

1

执行此操作的“Typeahead”方法是将您的数据集分成 2 个数据集，一个仅返回“类型 1”项目，另一个仅返回“类型 2”项目。在 typeahead 中，每个数据集都可以有自己的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
}])
于 2013-11-01T11:14:44.143 回答
0

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

选项1

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

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

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

选项 2

仅使用 1 个数据集，因此在您的filter. 基本上，返回一个数组，其中包含“type 1”标头的条目，然后是所有 type 1 条目，然后是“type 2”标头的条目，然后是所有 type 2 条目。

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

1）让您的模板包含课程。2) 让你的 CSS 使类不可选择、不可点击，并按照你想要的方式设置样式。

我更喜欢选项＃1。

于 2013-11-01T22:03:24.773 回答