在以前的版本中，我可以这样做：
$('#search').typeahead({
name: 'Search',
remote: '/search?query=%QUERY'
});
但是自从0.10更新以来，typeahead.js 要求我们定义source哪些我不能工作。如何在不必定义数据集函数的情况下定义远程？
我们如何在 Typeahead.js 中设置远程？
IT技术
javascript
autocomplete
remote-server
typeahead
typeahead.js
2021-01-15 07:35:45
3个回答
Typeahead.js 0.10.0 版现在使用一个称为建议引擎的单独组件来提供建议数据。Typeahead.js 附带的建议引擎称为Bloodhound。
因此，您不能“定义远程而不必定义数据集函数”。
可以在此处找到使用远程数据源的示例（我正在查询 TheMovieDb API，例如尝试搜索“Aliens”）：
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 对象上调用 initialize，也无需在将其分配给远程源时调用 ttAdapter()。
- 现在需要在远程选项散列中指定通配符（例如 %QUERY）。
好吧，您可以执行以下操作：
$('input#keywords').typeahead({
highlight: true,
},
{
name: 'brands',
display: 'value',
source: function(query, syncResults, asyncResults) {
$.get('/search?q=' + query, function(data) {
asyncResults(data);
});
}
})
如果您想使用 ajax POST 数据而不是 GET 数据来进行更多控制的 ajax 调用，您可以使用以下结构：
var meslekler = new Bloodhound({
datumTokenizer: function (d) {
return Bloodhound.tokenizers.whitespace(d.isim);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: 'my_url_with_or_without_%query_token.php',
ajax:{
type:"POST",
cache:false,
data:{
limit:5
},
beforeSend:function(jqXHR,settings){
settings.data+="&q="+$('.tt-input').typeahead('val');
},
complete:function(jqXHR,textStatus){
meslekler.clearRemoteCache();
}
}
}
});
meslekler.initialize();
$('.typeahead').typeahead(null, {
name:'meslekler',
displayKey: 'isim',
source: meslekler.ttAdapter()
});