在以前的版本中我可以这样做:
$('#search').typeahead({
name: 'Search',
remote: '/search?query=%QUERY'
});
但是自从 0.10
更新后,typeahead.js 要求我们定义 source
,我无法使它工作。如何在不必定义数据集函数的情况下定义远程?
最佳答案
Typeahead.js 0.10.0 版现在使用称为建议引擎的单独组件来提供建议数据。 Typeahead.js 附带的建议引擎称为 Bloodhound .
因此,您不能“定义 remote 而无需定义数据集函数”。
可以在此处找到使用远程数据源的示例(我正在查询 TheMovieDb API,尝试搜索“外星人”):
http://jsfiddle.net/Fresh/UkB7u/
代码在这里:
// Instantiate the Bloodhound suggestion engine
const movies = new Bloodhound({
datumTokenizer: datum => Bloodhound.tokenizers.whitespace(datum.value),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: 'http://api.themoviedb.org/3/search/movie?query=%QUERY&api_key=f22e6ce68f5e5002e71c20bcba477e7d',
// Map the remote source JSON array to a JavaScript object array
filter: movies => $.map(movies.results, movie => ({
value: movie.original_title
}))
}
});
// Initialize the Bloodhound suggestion engine
movies.initialize();
// Instantiate the Typeahead UI
$('.typeahead').typeahead(null, {
displayKey: 'value',
source: movies.ttAdapter()
});
请注意过滤器功能如何允许您从重要的 JSON 数据源中选择您想要用作预输入建议的内容。
Typeahead 0.11.1 更新
对于使用较新版本 typeahead 的用户,可以在此处找到基于原始问题的工作示例:
http://jsfiddle.net/Fresh/bbzt9hcr/
相对于 Typeahead 0.10.0,新版本(0.11.1)有以下差异:
- “过滤”功能已重命名为“转换”。
- 无需在 Bloodhound 对象上调用初始化,也无需在将其分配给远程源时调用 ttAdapter()。
- 现在需要在远程选项散列中指定通配符(例如 %QUERY)。
关于javascript - 我们如何在 Typeahead.js 中设置远程?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21530063/