在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 文件和机场进行查询，例如我已经完成了上面的例子。

第一个可能会更加一致，并且对服务器的点击量要少得多，但需要一些数据按摩才能开始，但每个项目中的组已经有一个变量，因此这应该不会太困难。这将需要大量的初始化，但我认为分组会按照您想要的方式进行。