【发布时间】：2014-08-24 22:55:59
【问题描述】：
更新
根据@bensmith的正确答案（https://stackoverflow.com/users/203371/BenSmith）我能找到我的问题，发现我没有正确地通过我的JSON层次结构。这是工作代码：
// instantiate the bloodhound suggestion engine
var engine = new Bloodhound({
datumTokenizer: function (datum) {
return Bloodhound.tokenizers.whitespace(datum.title);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: {
url: "SampleData.json",
filter: function (data) {
//console.log("data", data.response.songs)
return $.map(data.response.songs, function (song) {
return {
title: song.title,
artistName: song.artist_name
};
});
}
}
});
// initialize the bloodhound suggestion engine
engine.initialize();
// instantiate the typeahead UI
$('#prefetch .typeahead').typeahead(
{
hint: true,
highlight: true,
minLength: 1
},
{
name: 'engine',
displayKey: 'title',
source: engine.ttAdapter(),
templates: {
empty: [
'<div class="empty-message">',
'unable to find any results that match the current query',
'</div>'
].join('\n'),
suggestion: Handlebars.compile('<p><strong>{{title}}</strong> by {{artistName}}</p>')
}
});
感谢@BenSmith 的帮助！
原始问题
我是使用 Typeahead 和 Bloodhound 的新手。该文档不是很有帮助。我有一组从我正在使用的 API 返回的 JSON 对象。我正在尝试弄清楚如何浏览我的 JSON 对象，以便 Bloodhound 能够理解它们。
这里的目标是用户将开始输入歌曲名称。然后，自动完成将显示歌曲名称列表和演唱者。
例如：Mastodon 的午夜钟声
我正在使用每个库的最新版本： https://twitter.github.io/typeahead.js/
示例 JSON (SampleData.json)：
{“响应”：{“状态”：{“版本”：“4.2”，“代码”：0，“消息”：“成功”}，“歌曲”：[{“标题”：“午夜钟声”， “artist_name”：“mastodon”，“artist_foreign_ids”：[{“目录”：“7digital-au”，“fignd_id”：“7digital-au：艺术家：29785”}，{“目录”：“7digital-UK”， “figner_id”：“7digital-UK：艺术家：29785”}“，”曲目“：[]，”ARTIST_ID“：”ARMQHX71187B9890D3“，”ID“：”SOKSFNN1463B7E4B1E“}，{”标题“：”下降“， “artist_name”：“working的男人”，“artist_foreign_ids”：[{“目录”：“7digital-au”，“fignd_id”：“7digital-au：艺术家：50611”}“，”曲目“：[]，”艺术家 ID”：“AR4MVC71187B9AEAB3”，“ID”：“SORNNEB133A920BF86”}]}}使用此站点http://json.parser.online.fr/ 轻松格式化 JSON。
我将返回的 JSON 将始终采用相同的格式，但包含不同的数据。在此示例中，“曲目”为空。其他结果会有数据。我还需要能够访问这些数据。
我正在使用最新版本的 JQuery。这是我在我的 html 页面中包含的内容：
<script src="Scripts/jquery-2.1.1.min.js"></script>
<script src="Scripts/typeahead.bundle.min.js"></script>
这是 HTML：
<div id="prefetch">
<input class="typeahead" type="text" placeholder="Songs...">
</div>
这是脚本：
// instantiate the bloodhound suggestion engine
var engine = new Bloodhound({
datumTokenizer: function (d) { return Bloodhound.tokenizers.whitespace(d.tokens.join(' ')); },
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: {
url: "SampleData.json",
filter: function (response) {
return response.engine;
}
}
});
// initialize the bloodhound suggestion engine
engine.initialize();
// instantiate the typeahead UI
$('#prefetch .typeahead').typeahead(
{
hint: true,
highlight: true,
minLength: 1
},
{
name: 'songs',
displayKey: function (engine) {
return engine.songs.artist_name;
},
source: engine.ttAdapter()
});
当我尝试运行此代码时，我收到以下错误：
未捕获的类型错误：无法读取未定义的属性“令牌”
这里的任何帮助或指导将不胜感激。我只需要知道如何使用 Typeahead/Bloodhound 获取我正在使用的 JSON 数据。
谢谢！
【问题讨论】：
-
很高兴我能帮助 Jared :)
标签： jquery json nested typeahead.js bloodhound