Multiple datasets not working with Twitter Typeahead/Bloodhound

Question

I am new to working on Typeahead and Bloodhound and i'am using latest js. Below is my sample code. Html:

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

Here is the script:

var nbaTeams = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        prefetch: '{ "names": ["Aaron  Kreisler","Adam  Alder","Adam  Preece"]}'
      });

   var nhlTeams = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        prefetch: '{ "titles": ["Acute Chronic Pancreatitis Program", "Aerodigestive Program", "Analytical Imaging and Modeling Center (AIM)"]}'

      });

  $('#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>'
        }
 });

Any help. Thank you!

score 0 · Answer 1 · edited May 23 '17 at 12:02

0

bloodhound multiple dataset cause typeahead template issue

I post a question about that too (link on top), but I'v multiple dataset working, just the templates part broken. It's the code from officials examples but without the json file, can you post it on a jsfiddle.net

edited May 23 '17 at 12:02

Community

1
1

answered Nov 12 '15 at 11:16

Nicolas

571
6
13

Joshua Baboo · Answer 2 · 2018-05-01T12:49:43.460

display property seems to be wrong (blind c&p issue?); as given in doc display should point to the data-field within each matching data-row

Pls try the edited code-block below:

var nbaTeams = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: ["Aaron  Kreisler","Adam  Alder","Adam  Preece"]
  });

var nhlTeams = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: ["Acute Chronic Pancreatitis Program", "Aerodigestive Program", "Analytical Imaging and Modeling Center (AIM)"]
  });

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

Multiple datasets not working with Twitter Typeahead/Bloodhound

2 Answers2