我正在尝试使用AngularJS和Algolia的Autocomplete实现自动完成功能.js以及来自Algolia的两个来源(索引(。
第二个源自动完成工作正常,但地址自动完成仅适用于键入的第一个字母/数字。键入第二个字符时,地址列表将消失。如果我交换两个来源,地址工作正常,邮政编码仅适用于第一个字母/数字。
此外,在执行搜索时,console.log(address);
显示正在搜索的正确地址,只是没有显示在自动完成结果中。
这是它的动图:http://d.pr/i/2GCE
$scope.getDatasets = function() {
return [{
source: algolia.sources.hits(settings.replica, { hitsPerPage: 5 }),
displayKey: 'address',
name: 'address',
templates: {
suggestion: function(suggestion) {
var address = '<span class="address">' + suggestion._highlightResult.address.value;
if(suggestion.aptmnt) {
address += ', Unit ' +suggestion.aptmnt + '</span> | ';
} else {
address +='</span> | ';
}
address += '<span>' + suggestion.totbdrms + ' beds </span> | ' +
'<span>' + suggestion.totbaths + ' bath asdf </span> | ' +
' <span> $' + cleanPrice(suggestion.price) + '</span>';
console.log(address);
return address;
}
}
},{
source: algolia.sources.hits(settings.zipcode, { hitsPerPage: 5 }),
displayKey: 'zipcode',
name: 'zipcode',
templates: {
suggestion: function(suggestion) {
var zipcode = '<span class="zipcode">' + suggestion.zipcode + '</span>';
return zipcode;
}
}
}]
};
我正在使用
jquery - v1.12.4
angularjs - 1.6.1
algoliasearch.angular.min.js - v3
algoliasearch.helper.min.js - v2.18.0
autocomplete.angular.min.js - v0.28.1
angular-ui-router.js - v0.4.2
好的,我找到了解决方法。我永远无法让这个自动完成的 Angular 版本工作。此外,当我在 autocomplete.angular.js 中console.log(o);
构造函数function Dataset(o) {}
时,它将其注销了两次。不确定这是否是问题所在...但是正常的自动完成.js不会将其记录两次。
自从切换到autocomplete.j以来,自动完成一直工作得很好。这是我使用的代码:
autocomplete('#quicksearch', { hint: false, debug: true, openOnFocus: true }, [
{
source: autocomplete.sources.hits(settings.replica, { hitsPerPage: 5 }),
displayKey: 'address',
name: 'address',
templates: {
suggestion: function(suggestion) {
var address = '<span class="address">' + suggestion._highlightResult.address.value;
if(suggestion.aptmnt) {
address += ', Unit ' +suggestion.aptmnt + '</span> | ';
} else {
address +='</span> | ';
}
address += '<span>' + suggestion.totbdrms + ' beds </span> | ' +
'<span>' + suggestion.totbaths + ' bath </span> | ' +
' <span> $' + suggestion.price + '</span>';
return address;
}
}
},{
source: autocomplete.sources.hits(settings.zipcode, { hitsPerPage: 5 }),
displayKey: 'zipcode',
name: 'zipcode',
templates: {
suggestion: function(suggestion) {
var zipcode = '<span class="zipcode">' + suggestion.zipcode + '</span>';
return zipcode;
}
}
}
]);