车把预输入计数结果显示

Question

我正在尝试使用提前输入的把手来显示每个主题显示的结果数量，如下所示：

这是我目前的代码：

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

我一直在尝试不同的方法，但我似乎无法弄清楚。

编辑

jsFiddle 没有工作结果http://jsfiddle.net/0n0b2ue4/2/

jsFiddle 数据 http://jsfiddle.net/0n0b2ue4/3/

Answer 1

根据typeahead docs，传入header模板的上下文：

will contain query and suggestions

Suggestions 包含该数据集的当前建议列表，并显示长度属性。因此，只需在 header（而非 {{count}}）的车把模板中使用 {{suggestions.length}}。

这是 Stack Snippets 中的一个演示。

// 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())
    }
});

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

<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>

车把预输入计数结果显示

Handlebars typeahead count results showing

ajax

jquery

handlebars.js

typeahead.js

这是 Stack Snippets 中的一个演示。