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

是否有一种简单的方法可以提前输入结果/建议的数量？我确定typeahead对象（或者是bloodhound对象？）必须在某个地方存储这些数据。

Answer 1

您可以定义自己的函数来处理用户输入的查询。

我制作了一个样本小提琴：http://jsfiddle.net/dtengeri/6ApJg/

基本思路是您手动获取Bloodhound引擎的建议，并仅将所需数量的结果传递给typeahead。

// 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-header的范围。）

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

为了获得所有结果，您应该在Bloodhound引擎中设置一个高数字作为限制：

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 = function（）{

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

}

Typeahead.js 0.10.x：如何显示每个类别的结果数

2 个答案: