多个数据集无法使用Twitter Typeahead / Bloodhound

时间:2015-11-04 12:32:41

标签: javascript jquery twitter-bootstrap-3

我是使用Typeahead和Bloodhound的新手,我使用的是最新的js。以下是我的示例代码。 HTML:

<div id="multiple-datasets">
    <input class="typeahead" type="text" placeholder="NBA and NHL teams">
</div>

这是脚本:

var nbaTeams = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        prefetch: '{ "names": ["Aaron  Kreisler","Adam  Alder","Adam  Preece"]}'
      });

   var nhlTeams = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        prefetch: '{ "titles": ["Acute Chronic Pancreatitis Program", "Aerodigestive Program", "Analytical Imaging and Modeling Center (AIM)"]}'

      });

  $('#multiple-datasets .typeahead').typeahead({           
        highlight: true
      },
      {
        name: 'nba-teams',
        display: 'team',
        source: nbaTeams,
        templates: {
          header: '<h3 class="league-name">NBA Teams</h3>'
        }
      },
      {
        name: 'nhl-teams',
        display: 'team',
        source: nhlTeams,
        templates: {
          header: '<h3 class="league-name">NHL Teams</h3>'
        }
 });

任何帮助。谢谢!

2 个答案:

答案 0 :(得分:0)

bloodhound multiple dataset cause typeahead template issue

I post a question about that too (link on top), but I'v multiple dataset working, just the templates part broken. It's the code from officials examples but without the json file, can you post it on a jsfiddle.net

答案 1 :(得分:0)

display属性似乎是错误的(盲目的c&amp; p问题?); doc display中给出的内容应指向每个匹配数据行中的data-field

请尝试下面编辑过的代码块:

var nbaTeams = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: ["Aaron  Kreisler","Adam  Alder","Adam  Preece"]
  });

var nhlTeams = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: ["Acute Chronic Pancreatitis Program", "Aerodigestive Program", "Analytical Imaging and Modeling Center (AIM)"]
  });

$('#multiple-datasets .typeahead').typeahead({           
    highlight: true
  },
  {
    name: 'nba-teams',
    source: nbaTeams,
    templates: {
      header: '<h3 class="league-name">NBA Teams</h3>'
    }
  },
  {
    name: 'nhl-teams',
    source: nhlTeams,
    templates: {
      header: '<h3 class="league-name">NHL Teams</h3>'
    }
 });