javascript - Typeahead:如何将数据列表分为 3 个不同的部分？ [如多数据集]

Question

我正在开发 typeahead.js，用户可以按名称或专业或任何其他关键字进行搜索。现在我想用三个不同的字段填充数据。我有三个字段1.人，2.特殊性3.公园。信息用户类型应在这三个不同的部分中显示如MULTIDATASET所示

var nbaTeams = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: '../data/nba.json'
});

var nhlTeams = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: '../data/nhl.json'
});

$('#multiple-datasets .typeahead').typeahead({
  highlight: true
},
{
  name: 'nba-teams',
  display: 'team',
  source: nbaTeams,
  templates: {
    header: '<h3 class="league-name">NBA Teams</h3>'
  }
},
{
  name: 'nhl-teams',
  display: 'team',
  source: nhlTeams,
  templates: {
    header: '<h3 class="league-name">NHL Teams</h3>'
  }
});

<div id="multiple-datasets">
  <input class="typeahead" type="text" placeholder="NBA and NHL teams">
</div>

在我的场景中，数据仅显示在单个数据集中。 远程 url 数据将来自服务器，这不仅仅是一个简单的数组，它是对象的对象的对象。目前我能够使用单个远程 url 填充数据。但我无法实现多数据集。 JSFIDDLE: 在此输入注意:由于网址来自服务器端。我不想透露相关信息。在我的本地它工作正常。下面是我如何获得结果的图像。 任何帮助将不胜感激。谢谢。 JSFIDDLE 检查此处

Answer 1

将 .typeahead 处的 remote 替换为 Bloodhound提出请求； templates , .typeahead 处的 suggestion 选项用于设置在 html 处呈现的结果。另请参阅Create customize Type-Head using jQuery and Bootstrap-Typeahead? , Bootstrap Typeahead not showing suggestion which have the valueKey starting with same value

    templates: {
        suggestion: function(data) { // data return from `Bloodhound`
             console.log(data);
             return "<ul><li>" + data.result[0] + "<li>"
                    + "<li>" + data.result[1] + "<li>"
                    + "<li>" + data.result[2] + "<li></ul>"
        }
    }