Typeahead.js 0.10.x：如何顯示每個類別的結果數量

Question

Typeahead.js 0.10支持頁眉和頁腳以及搜索結果的模板。我希望能夠獲得每個類別的實際結果/建議數量（即忽略限制值）並將其顯示在類別名稱標題中。

例如 -

結果：

• A類（24結果）
  • -A1
  • -A2
  • -A3
• B類（167個結果）
  • -B1
  • -B2
  • -B3

我的範本目前看起來是這樣的：

{ 
name: 'Applications', 
displayKey: 'value', 
source: app.ttAdapter(), 
extraVars:Handlebars.registerHelper("numResults",function(){ 
    return ( "HowToGetTheseResults??"); 
}), 
templates: { 
    header:Handlebars.compile([ 
     '<h3 class="applications"> Applications ({{numResults}}) results </h3>' 
    ].join('')), 

    suggestion: Handlebars.compile([ 
     '<p><b>{{value}}</b> </p>' 
    ].join('')) 
} 

是有一種簡單的方法可以提前輸入結果數/ su ggestions？我確定typeahead對象（或血腥對象？）必須將這些數據存儲在某處。

Answer 1

您可以定義自己的函數來處理用戶輸入的查詢。

我做了一個樣本小提琴：http://jsfiddle.net/dtengeri/6ApJg/

的基本想法是，你手動擺脫警犬引擎的建議，只有通過所要求的結果，以預輸入量。

// Custom source function in the dataset definition. 
source: function (query, cb) { 
    // Get the data from the Blodhound engine and process it. 
    nbaTeams.get(query, function (suggestions) { 
    // Show only the first 3 results. 
    cb(suggestions.slice(0, 3)); 
    // Set the headers content. 
    $('#nba-header').text(suggestions.length); 
    }) 
}, 

您必須在標題模板中定義一個HTML元素，您將在其中放置結果的數量。 （在這個例子中，ID＃NBA的頭跨度。）

templates: { 
    // Insert an HTML element where you will place the number of results. 
    header: '<h3 class="league-name">NBA Teams (<span id="nba-header"></span>)</h3>' 
} 

爲了讓所有的結果，你應該設定一個較高的號碼作爲警犬引擎的限制：

var nbaTeams = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'), 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    local: nba(), 
    limit: Number.MAX_VALUE // Set the limit as high as possible. 
}); 

Answer 2

來到在這裏，發現這個答案是有幫助的。這是另一種方法，它將在每個部分的頂部保留一個標題，並添加一個計數。

VAR initTypeahead =函數（）{

// Sets where the data is coming from 
var nbaTeams = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'), 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    prefetch: '../Scripts/vendor/typeahead.js/example_data/nba.json' 
}); 

var nhlTeams = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'), 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    prefetch: '../Scripts/vendor/typeahead.js/example_data/nba.json' 
}); 

// Finds the input and inits Typeahead 
$('.typeahead').typeahead({ 
    highlight: true, 
    minLength: 1 
}, 

// Defines how suggestions are displayed 
{ 
    name: 'nba-teams', 
    display: 'team', 
    source: nbaTeams, 
    templates: { 

    header: function (context) { 
     // calculate total hits here 
     return '<h3 class="group-name">NBA Teams: ' + context.suggestions.length + '</h3>'; 
    } 
    } 
}, 
{ 
    name: 'nhl-teams', 
    display: 'team', 
    source: nhlTeams, 
    templates: { 
    header: function (context) { 
     // calculate total hits here 
     return '<h3 class="group-name">NHL Teams: ' + context.suggestions.length + '</h3>'; 
    }  } 
}); 

}