更新:
这可能是一个编码问题,但我不太确定如何找出或解决它。如果我在 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
位于它应该在的位置。
我的猜测是我遗漏了一些重要的东西,但由于它与其他数据源一起使用并且该文件在结构上没有那么不同,所以我无法弄清楚我的错误。
所以请,我感谢各种帮助。
干杯 – 克里斯
最佳答案
好吧,我很蠢,这就是答案。
我有datumTokenizer: Bloodhound.tokenizers.obj.whitespace('ktb_be')
写下来,由于缺乏知识,我没有意识到不可能找到仅包含字母的字符串,因为字段 ktb_be
仅包含数值。
我真的不明白datumTokenizer
可以说是搜索索引。现在我明白了。我猜。
关于javascript - 为什么 Twitter 的 typeahead.js 不能与我的 JSON 配合使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27527509/