Not able to show data for Multiple Datasets using typeahead.js in rails app

Not able to show data for Multiple Datasets using typeahead.js in rails app

typeahead.json.builder

json.array!(@reports.first(5)) do |report|
  json.title report.title.truncate(130)
end

json.array!(@press_releases.last(5)) do |news|
  json.title news.title.truncate(130)
end

reports.js code

var reports = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('title'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
limit: 5,
remote: {
    url: '/typeahead/%QUERY',
    wildcard: '%QUERY',
    transform: function(d) {
        return d;
    }
}
});

var news_updates = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('title'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
limit: 5,
remote: {
    url: '/typeahead/%QUERY',
    wildcard: '%QUERY',
    transform: function(d) {
        return d;
    }
}
});
$('#prefetch .typeahead').typeahead(
{
  highlight: true,
  highlight: true,
  minLength: 2
},
{
  name: 'reports',
  display: 'title',
  source: reports,
  templates: {
    header: '<h3 class="league-name">Reports</h3>'
  }
},
{
  name: 'press_releases',
  display: 'title',
  source: press_releases,
  templates: {
    header: '<h3 class="league-name">Press Releases</h3>'
  }
}
);

This is my code, so whenever my js call is made, it shows only 5 reports titles in both the blocks, I want to show 5 reports in reports block and 5 press releases in below block

Any suggestions on this will be highly appreciated