Handlebars typeahead count results showing

I'm trying to show the amount of results showing per subject using handlebars in typeahead, like this:

Here's the code I have so far:

<!-- language: lang-js -->

var clients = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('client_name'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: {
    url: 'clients.php?query=%QUERY',
    wildcard: '%QUERY'
  }
});

var contacts = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('contact_firstname'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: {
    url: 'contacts.php?query=%QUERY',
    wildcard: '%QUERY'
  }
});

var tasks = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('assignment_subject'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: {
    url: 'tasks.php?query=%QUERY',
    wildcard: '%QUERY'
  }
});

clients.initialize();
contacts.initialize();
tasks.initialize();

$("#clients").typeahead({
  hint: true,
  // highlight: true,
  minLength: 1
},{
  name: 'clients',
  displayKey: 'client_name',
  source: clients.ttAdapter(),
  templates: {
    header: Handlebars.compile('<div class="search_header">Kundkort <span>(<span class="test">{{#each client_name}} {{counter @index}} {{@index}} {{/each}}</span>) träffar</span></div>'),
    suggestion: Handlebars.compile('<div><span class="act_link"><a href="?p=crm&client_id={{client_id}}&action=view">{{client_name}}</a></span> <div class="client_type">{{#ifCond client_type "==" 1}} A-kund {{else}} {{#ifCond client_type "==" 2}} Återförsäljare {{/ifCond}} {{#ifCond client_type "==" 3}} Leverantör {{/ifCond}} {{#ifCond client_type "==" 4}} Partner {{/ifCond}} {{#ifCond client_type "==" 5}} Prospekt {{/ifCond}} {{/ifCond}}</div></div>')
  }
},{
  name: 'contacts',
  displayKey: 'contact_firstname',
  source: contacts.ttAdapter(),
  templates: {
    header: Handlebars.compile('<div class="search_header">Personer <span>(<span class="test">{{c_count}}</span>) träffar</span></div>'),
    suggestion: Handlebars.compile('<div><span class="act_link"><a href="?p=crm&client_id={{client_id}}&action=view">{{contact_firstname}} {{contact_lastname}}</a></span> <div class="client_type">{{client_name}}</div></div>')
  }
},{
  name: 'tasks',
  displayKey: 'assignment_subject',
  source: tasks.ttAdapter(),
  templates: {
    header: Handlebars.compile('<div class="search_header">Uppgifter <span>(<span class="test">{{tasks.id.length}}</span>) träffar</span></div>'),
    suggestion: Handlebars.compile('<div><span class="act_link"><a href="?p=tasks&id={{id}}&action=view">{{assignment_subject}}</a></span></div>')
  }      
});

I've been trying different methods and I can't seem to figure it out.

---

EDIT

jsFiddle without working results http://jsfiddle.net/0n0b2ue4/2/

jsFiddle with data http://jsfiddle.net/0n0b2ue4/3/

According to the typeahead docs, the context passed into the header template:

will contain query and suggestions

Suggestions contains a list of the current suggestions for that data set and exposes a length property. So just use {{suggestions.length}} in the handlebars template for your header (not {{count}}).

Here's a demo in Stack Snippets.

<!-- begin snippet: js hide: false --> <!-- language: lang-js -->

// constructs the suggestion engine
var clients = new Bloodhound({
    local: ["A Client", "AA Client", "BC Client"],
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace
});
var contacts = new Bloodhound({
    local: ["BA Contact", "BB Contact", "CC Contact"],
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace
});
var tasks = new Bloodhound({
    local: ["A Client", "AA Client", "BC Client"],
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace
});

// initialize typeahead by passing in options and data
$("#clients").typeahead({
    hint: true,
    minLength: 1
}, {
    name: 'clients',
    source: clients,
    templates: {
        header: Handlebars.compile($("#clients-header").html())
    }
}, {
    name: 'contacts',
    source: contacts,
    templates: {
        header: Handlebars.compile($("#contacts-header").html())
    }
}, {
    name: 'tasks',
    source: tasks,
    templates: {
        header: Handlebars.compile($("#tasks-header").html())
    }
});

<!-- language: lang-css -->

.search_header {
  margin-left: 6px;
}
div.tt-menu {
  margin-top: 0px;
}

<!-- language: lang-html -->

<link href="http://twitter.github.io/typeahead.js/css/examples.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.js"></script>

<input type="text" id="clients" class="typeahead" />

<!-- Templates -->
<script id="clients-header" type="text/x-handlebars-template">
  <strong class="search_header">
    Clients <small>({{suggestions.length}}) results</small>
  </strong>
</script>
<script id="contacts-header" type="text/x-handlebars-template">
  <strong class="search_header">
    Contacts  <small>({{suggestions.length}}) results</small>
  </strong>
</script>
<script id="tasks-header" type="text/x-handlebars-template">
  <strong class="search_header">
    Tasks  <small>({{suggestions.length}}) results</small>
  </strong>
</script>

<!-- end snippet -->