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

【问题标题】：Why doesn't Twitter's typeahead.js work with my JSON?为什么 Twitter 的 typeahead.js 不能与我的 JSON 一起使用？
【发布时间】：2015-02-16 02:45:04
【问题描述】：

更新：

这可能是一个编码问题，但我不太确定如何找出或解决它。如果我在 Sublime Text 3 中打开nba2.json，进入控制台并输入view.encoding() 我得到Undefined 尽管UTF-8 显示在状态栏中（要在ST3 的状态栏中显示编码，您必须添加@ 987654333@ 到您的用户偏好）。

对ktb.json 执行相同操作，我会在控制台和状态栏中看到UTF-8。

原帖：

美好的一天！

我正在尝试将 Twitter 的 typeahead.js 集成到我的 Web 应用程序中。我关注了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 是它应该在的位置。

我的猜测是我遗漏了一些重要的东西，但由于它可以与其他数据源一起使用，而且这个文件在结构上并没有那么不同，所以我无法弄清我的错误。

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

干杯 ——克里斯

【问题讨论】：

标签： javascript jquery twitter typeahead.js twitter-typeahead

【解决方案1】：

好吧，我很愚蠢，这就是答案。

我已经写下了datumTokenizer: Bloodhound.tokenizers.obj.whitespace('ktb_be')，由于缺乏知识，我没有注意到不可能找到只包含字母的字符串，因为字段ktb_be 只包含数值。

我并没有真正明白datumTokenizer 是可以这么说的搜索索引。现在我明白了。我猜。

【讨论】：