javascript - 为什么 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可以说是搜索索引。现在我明白了。我猜。