在Typeahead中对子标题进行分组建议

Question

我有一个Typeahead的实例拉入一个列出机场的远程JSON对象，我需要按照“位置组”的建议将它们分组，如下图所示：

...这里是一个如何格式化JSON的例子：

{
   "locations":[
  {
     "name":"London Intl Apt (YXU), Middlesex, Ontario, Canada",
     "type":"airport",
     "id":"528cc236e4b0ec1df53b21af",
     "iata":"YXU",
     "locationGroup":"",
     "locationGroupName":""
  },
  {
     "name":"London - Gatwick Apt (LGW), West Sussex, England, United Kingdom",
     "type":"airport",
     "id":"528cc236e4b0ec1df53b28cb",
     "iata":"LGW",
     "locationGroup":"LON",
     "locationGroupName":"London - All Airports (LON)"
  },
  {
     "name":"London - Heathrow Apt (LHR), Greater London, England, United Kingdom",
     "type":"airport",
     "id":"528cc236e4b0ec1df53b28b1",
     "iata":"LHR",
     "locationGroup":"LON",
     "locationGroupName":"London - All Airports (LON)"
  }
 ]
}

因此，如果某个商品具有“locationGroup”值，则应将其与具有相同“locationGroup”的所有其他商品分组。如果没有'locationGroup'，它应该单独列出。

我猜测（假设这是可能的）这应该在我设置Bloodhound引擎时完成 - 可能在Filter中 - 但我真的很难弄清楚如何。任何人都可以帮忙吗？

Answer 1

不幸的是，似乎在Typeahead.js中获取标题和部分的唯一方法是关注他们的Multiple Sections with Headers example。他们的代码并不完全完整，所以我会尝试模仿你的代码和他们的例子。

// Get the data
var londonUk = new Bloodhound({
   datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.name); },
   queryTokenizer: Bloodhound.tokenizers.whitespace,
   prefetch: '../data/londonUk.json'
});

var londonCa = new Bloodhound({
   datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.name); },
   queryTokenizer: Bloodhound.tokenizers.whitespace,
   prefetch: '../data/londonCa.json'
});

// Intialize the Bloodhound
londonUk.initialize();
londonCa.initialize();

// Set up Typeahead
$('.transit-search .typeahead').typeahead({
   highlight: true
},
{
   name: 'London UK All Airports',
   displayKey: 'name',
   source: londonUk.ttAdapter(),
   templates: {
       // This is the group header that will be shown at the top of a grouping
       header: '<h3 class="group-name">London - All Airports (LON)</h3>',
       // These will be the templates for the items within a group.
       suggestion: Handlebars.compile(['<p class="indent">{{name}} {{type}}</p>'])
   }
},
{
   name: 'London CA All Airports',
   displayKey: 'name',
   source: londonCa.ttAdapter(),
   templates: {
       header: '<h3 class="group-name">London, ON, Canada - All Airports</h3>',
       suggestion: Handlebars.compile(['<p class="indent">{{name}} {{type}}</p>'])
   }
});

这里的困难在于使您的数据以Typeahead.js希望数据结构化的方式工作，以便它可以创建数据组。您可以传回一个巨大的JSON文件，然后将每个机场整理成自己的列表，然后您可以将其用作每个Bloodhound初始化的本地数据变量，或者您可以查询您支持的每个JSON文件和机场，例如我已经完成了上面的例子。

第一个可能会更加一致并且对服务器的命中率会大大降低，但是需要一些数据按摩才能开始，但是你已经在每个项目中都有一个变量，所以这不应该太难。这将需要大量的初始化，但我认为分组将按照您的要求进行。