在无法使用我自己的本地api产生任何结果后,我尝试直接在我的项目中使用this answer中的示例:
// Instantiate the Bloodhound suggestion engine
var movies = new Bloodhound({
datumTokenizer: function (datum) {
return Bloodhound.tokenizers.whitespace(datum.value);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: 'http://api.themoviedb.org/3/search/movie?query=%QUERY&api_key=470fd2ec8853e25d2f8d86f685d2270e',
filter: function (movies) {
// Map the remote source JSON array to a JavaScript object array
return $.map(movies.results, function (movie) {
return {
value: movie.original_title
};
});
}
}
});
// Initialize the Bloodhound suggestion engine
movies.initialize();
// Instantiate the Typeahead UI
$('.typeahead').typeahead(null, {
// Use 'value' as the displayKey because the filter function
// returns suggestions in a javascript object with a variable called 'value'
displayKey: 'value',
source: movies.ttAdapter()
});
当我输入给定的输入时,我可以在“网络”选项卡中看到对远程API的请求实际上已经通过,但是下拉列表没有显示 - 这是完全相同的代码。举个例子,但它的工作方式不同。
我正在使用jquery 3.1.1和bootstrap 3.3.7与Typeahead.bundle.js 0.11.1
我在哪里可以开始寻找确定建议的下拉列表实际上没有出现的原因?
编辑:
我现在意识到我遗漏了一些可能很重要的东西:这是在'脚本'部分的MVC视图中。脚本部分正在页面顶部呈现,此部分中的其他javascript正在执行 - 但是,应该应用此脚本的.typeahead
框在局部视图中。也许我只是把事情放错了。