加载旋转器类型ahead的猎犬标签输入

Question

我已经用bloodhound和tagsinput设置了一个自动完成搜索表单。

它在远程工作很好，但建议大约需要1或2秒才能通过Wordpress API显示。

我想在输入中添加一个加载微调器。这样一来，人们就可以清楚地看到，他们必须等待建议的加载。

我知道这个帖子https://github.com/twitter/typeahead.js/issues/166但它只是关于typeaheadjs而不是tagsinput。老实说，当我使用bloodhound和tagsinput时，我不太理解typeaheadjs的目的。

我使用两个js文件：typeahead.bundle.js和bootstrap-tagsinput.js

这是我的工作代码(没有微调器(：

var transform_terms = function( terms ) {
return $.map( terms, function( term ) {
return {
id: term.id,
name: term.name,
count: term.count
};
} );
};
var localisations = new Bloodhound( {
datumTokenizer: Bloodhound.tokenizers.obj.whitespace( [ 'name', 'id' ] ),
queryTokenizer: Bloodhound.tokenizers.whitespace,
identify: function( term ) {
return {
label: term.name,
value: term.id,
};
},
sufficient: 5,              
remote: {
url: '/wp-json/wp/v2/localisation?_fields=name,id&orderby=count&order=desc&hide_empty=false&search=%QUERY',
wildcard: '%QUERY',
transform: transform_terms
},
indexRemote: true
} );
localisations.initialize();

$('#localisation').tagsinput({
itemValue: 'id',
itemText: 'name',
maxTags: 5,
confirmKeys: [13, 9],
typeaheadjs: {
name: 'localisations',
displayKey: 'name',
source: localisations.ttAdapter()
}
});

有人能帮我在查询过程中添加微调器吗？提前感谢！

Answer 1

感谢这篇非常好的帖子https://digitalfortress.tech/tutorial/smart-search-using-twitter-typeahead-bloodhound/，我找到了一个看起来可靠的解决方案。但我不得不说，使用Bootstrap Typeahead并不明显，文档也很差。。。

这是我的新工作代码：

var transform_terms = function( terms ) {
return $.map( terms, function( term ) {
return {
id: term.id,
name: term.name,
count: term.count
};
} );
};
var localisations = new Bloodhound( {
datumTokenizer: Bloodhound.tokenizers.obj.whitespace( [ 'name', 'id' ] ),
queryTokenizer: Bloodhound.tokenizers.whitespace,
identify: function( term ) {
return {
label: term.name,
value: term.id,
};
},
sufficient: 5,
remote: {
url: '/wp-json/wp/v2/localisation?_fields=name,id&orderby=count&order=desc&hide_empty=false&search=',
prepare: function (query, settings) {
console.log('load');
$("#search-loader").fadeIn();
settings.url = this.url + query;
return settings;
},
filter: function (data) {
console.log('finish');
$("#search-loader").fadeOut();
return data;
}
},
identify: function (response) {
return response.name;
},
indexRemote: true
} );
localisations.initialize();

$('#localisation').tagsinput({
itemValue: 'id',
itemText: 'name',
maxTags: 5,
confirmKeys: [13, 9],
typeaheadjs: [{
highlight: true
},{
name: 'localisations',
displayKey: 'name',
source: localisations.ttAdapter()
}]
});