为什么Twitter的typeahead.js不能与我的JSON一起使用？

Question

更新

这可能是一个编码问题，但我不太清楚如何解决或解决它。如果我在Sublime Text 3中打开nba2.json，请转到控制台并输入view.encoding()我得到Undefined虽然状态栏中显示UTF-8（以显示ST3中的编码）状态栏，您必须将"show_encoding": true添加到您的用户首选项中）。

对ktb.json做同样的事情我在控制台和状态栏中得到UTF-8。

---

原帖：

美好的一天！

我正在尝试将Twitter的typeahead.js集成到我的网络应用程序中。我跟着examples，一切顺利。

然后，我尝试使用自己的数据源，基于these two个例子。

我以我认为应该工作的方式修改了这些示例（我稍后会看到我的代码），但显然没有成功。因此我请求你的帮助。

我从这段代码开始：

var nbaTeams = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: '../testData/nba.json'
});

nbaTeams.initialize();

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

请注意，我从here获取了nba.json文件。

如图所示，此尝试完美无缺：

然后我将nba.json文件修改为这样（为了便于阅读，我缩短了列表）：

[
  {
    "team": "Boston Celtics",
    "test": "one"
  },
  {
    "team": "Dallas Mavericks",
    "test": "two"
  },
  {
    "team": "Brooklyn Nets",
    "test": "three"
  },
  {
    "team": "Houston Rockets",
    "test": "four"
  }
]

我进行了这些更改，因为这些示例只处理了只有一个属性的JavaScript对象，但我打算使用的对象由许多属性组成（正如您将在一秒钟内看到的那样）。

我相应地更改了上面的代码：

var nbaTeams = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: '../testData/nba2.json'
});

nbaTeams.initialize();

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

如您所见，我将displayKey的值更改为test，以便获取建议框中显示的新字段。和以前一样，这很好用：

现在我正在使用的数据源看起来像这样（再次，为了便于阅读而缩短）：

[
  {
    "ktb_be": "1213",
    "ktb_bezeichnung": "KTB Amberg-Sulzbach",
    "ba_nummer": "962100",
    "ba_name": "Amberg Oberpf.",
    "ursprungs_be": "2-008-1013",
    "ursprungs_bez": "Amberg",
    "seitenzahl": "182",
    "lon": "11.84603545968802",
    "lat": "49.454826399610624",
    "dLon": 11.84603545968802,
    "dLat": 49.454826399610624
  },
  {
    "ktb_be": "1213",
    "ktb_bezeichnung": "KTB Amberg-Sulzbach",
    "ba_nummer": "962802",
    "ba_name": "Ammerthal",
    "ursprungs_be": "2-008-1013",
    "ursprungs_bez": "Amberg",
    "seitenzahl": "8",
    "lon": "11.766274528840961",
    "lat": "49.44355586068654",
    "dLon": 11.766274528840961,
    "dLat": 49.44355586068654
  }
]

所以我继续并再次更改代码以适应数据：

var books = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('ktb_be'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: '../testData/ktb.json'
});

books.initialize();

$('#multiple-datasets .typeahead').typeahead({
    highlight: true
},
{
    name: 'books',
    displayKey: 'ktb_bezeichnung',
    source: books.ttAdapter(),
    templates: {
        header: '<h3 class="book-name">Books</h3>'
    }
});

嗯，这并不奇怪，这不起作用，否则我不会写这个问题。结果如下：

我可以保证文件ktb.json是应该的位置。

我的猜测是我遗漏了一些至关重要的东西，但由于它与其他数据源一起工作，而且这个文件并没有那么明显的结构，我无法弄清楚我的错误。

所以，请，我感谢各种帮助。

干杯 - 克里斯

Answer 1

嗯，我很蠢，这就是答案。

我写了datumTokenizer: Bloodhound.tokenizers.obj.whitespace('ktb_be')，由于缺乏知识，我无法找到只包含字母的字符串这一事实，因为字段ktb_be只包含数字值

我真的没有得到datumTokenizer可以说是搜索索引。现在我知道了。我想。