Typeahead模板，如果/其他

感谢您对此问题的帮助：Typeahead result formatting，这是一个后续。Typeahead模板，如果/其他

我的JSON看起来像

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

在下拉列表中，我需要能够从2型独立型的下降，所以

1型标题

类型1项

类型1项*

2型标题

型2项

如果没有结果，1型，那么不显示标题。类型2相同。

这是可能的typeahead和模板引擎？我使用Hogan，但我不挑剔。

来源

2013-11-01 Leads

这样做的“Typeahead”方法是将数据集分成两个数据集，一个只返回“类型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 
}])

来源

2013-11-01 11:14:44

这不起作用，因为它意味着我无法控制的JSON上的额外查询。 – Leads

有几种解决方法，我会在PC附近写更多的解决方法。 –

请注意，上述代码适用于v0.10.x之前的Typeahead.js版本 – bart

既然你没有在JSON部分控制，你有两个选择：

选项1点

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

这是JSON调用的两倍，所以服务器负载是其两倍。尽管如此，客户端不会看到延迟，因为查询是并发的。

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

选项2

仅使用1集，因此，在您的filter一些工作。基本上，返回一个数组，其中包含“类型1”标题的条目，然后是所有类型1条目，然后是“类型2”标题的条目，然后是所有类型2条目。这个数组是一个对象数组。每个对象也将有一个class成员。在“类型1”和“类型2”标题的条目中，将类别设置为"header"或者沿线，并且：

1）让您的模板包含类。 2）让你的CSS让你的类无法选择，不可点击，并以你想要的方式进行设计。

我更喜欢选项＃1。

来源

2013-11-01 22:03:24

Typeahead模板，如果/其他

回答

相关问题