如果查询文本超过3-4个字符，请运行AlgoliaSearch自动完成

Question

我试图将AlgoliaSearch限制为仅当用户在输入框中键入3-4个以上的字符时才显示自动完成的结果，我曾尝试使用jquery中的keypress事件来执行此操作，但不幸的是，这不起作用，我尝试搜索Algolia博客，但没有成功。下面是我的代码，

var initvalues = initvariables;
var url = userdetails['webroot'];
console.log(initvalues);
console.log(url);
var fileName = '';
if (url.includes('qa')|| url.includes('dev') || url.includes('localhost')) {
fileName = "constants-dev.json";
} else if(url.includes('pp')|| url.includes('pre-prod')) {
fileName = "constants-preprod.json";
} else {
fileName = "constants-prod.json";
}
var directory = window.location.pathname.split('/')[1];
var json = $.getJSON({'url': location.protocol + '//' + location.host +'/'+  directory +  '/blocks/algoliasearch/'+ fileName, 'async': false});
json = JSON.parse(json.responseText);
console.log(json);
var client = algoliasearch(json.appId, json.apiKey);

var clientIndex = json.current_index;
var index = client.initIndex(clientIndex);
console.log("Index" + JSON.stringify(index));
console.log(autocomplete.sources.hits(index, this.userFilters(userdetails)))
if (document.getElementsByTagName('html')[0].getAttribute('lang') == 'en' || document.getElementsByTagName('html')[0].getAttribute('xml:lang') == 'en') {
var myAutoComplete = autocomplete('#searchform_search', { hint: false }, [
{
source: autocomplete.sources.hits(index, this.userFilters(userdetails)),
displayKey: 'title.en',
templates: {
suggestion: function (suggestion) {
var sugTemplate = '';
if (suggestion.modalite.en == 'Online') {
sugTemplate += '<span class="ena-aamodalonline"></span>';
} else if (suggestion.modalite.en == 'In Person') {
sugTemplate += '<span class="ena-aamodalinperson"></span>';
} else {
sugTemplate += '<span class="ena-aamodalhybrid"></span>';
}
//sugTemplate += '<img src="">'; // Where course's images would be displayed
sugTemplate += '<a class="ena-aaresult" href="'+url+'/course/view.php?id='+suggestion.courseid+'">'+suggestion.title.en+'</a>';
/*if (suggestion.partageable == 'Locale') {
sugTemplate += '<span class="ena-aalocal">Local</span>';
} else {
sugTemplate += '<span class="ena-aapart">Shareable</span>';
}
sugTemplate += '<span class="ena-aaest">'+suggestion.establishmentfullname+'</span>';*/
//sugTemplate += '<hr/>';
return sugTemplate;
}
}
}
]).on('autocomplete:selected', function (event, suggestion, dataset) {
console.log(suggestion);
console.log(dataset)
window.location.href = url+'/course/view.php?id='+suggestion.courseid;
});

} else {
var myAutoComplete = autocomplete('#searchform_search', { hint: false }, [
{
source: autocomplete.sources.hits(index, this.userFilters(userdetails)),
displayKey: 'title.fr',
templates: {
suggestion: function (suggestion) {
var sugTemplate = '';
if (suggestion.modalite.en == 'Online') {
sugTemplate += '<span class="ena-aamodalonline"></span>';
} else if (suggestion.modalite.en == 'In Person') {
sugTemplate += '<span class="ena-aamodalinperson"></span>';
} else {
sugTemplate += '<span class="ena-aamodalhybrid"></span>';
}
//sugTemplate += '<img src="">'; // Where course's images would be displayed
sugTemplate += '<a class="ena-aaresult" href="'+url+'/course/view.php?id='+suggestion.courseid+'">'+suggestion.title.fr+'</a>';
/*if (suggestion.partageable == 'Locale') {
sugTemplate += '<span class="ena-aalocal">'+suggestion.partageable+'</span>';
} else {
sugTemplate += '<span class="ena-aapart">'+suggestion.partageable+'</span>';
}
sugTemplate += '<span class="ena-aaest">'+suggestion.establishmentfullname+'</span>';*/
//sugTemplate += '<hr/>';
return sugTemplate;
}
}
}
]).on('autocomplete:selected', function (event, suggestion, dataset) {
//alert($('#algoliasearchinput.value') + "  " + JSON.stringify($('#algoliasearchinput.value')));
window.location.href = url+'/course/view.php?id='+suggestion.courseid;
});
}

}

我无法解析查询，因为函数希望选择器作为参数，我如何修改它，使自动完成仅在输入searchform_search中只有3个以上字符时运行。

以下是工作原型的Codepen：https://codepen.io/karankia/pen/eYyGQbE

Answer 1

在Github上的Algolia Automcomplete.js文档中找到了解决方案：https://github.com/algolia/autocomplete/blob/45fa32d008620cf52bf4a90530be338543dfba7f/README.md#global-选项。解决方案是重新创建源属性，以便获得类型化查询。

var hitsSource =  autocomplete.sources.hits(index, this.userFilters(userdetails));
var myAutoComplete = autocomplete('#searchform_search', { hint: false }, [
{
source: function(query, callback) {
if (query.length > 2) {
hitsSource(query, function(suggestions) {
callback(suggestions);
});
}
},
displayKey: 'title.en',
templates: '' 
}
]);

Answer 2

看起来你做到了。这里还记录了类似于以下的条件来源：https://www.algolia.com/doc/ui-libraries/autocomplete/guides/changing-behavior-based-on-query/#adding-条件源

但具有相同的query.length > 2

如果我没有提到这被认为是大多数自动完成用例的反模式，那我就太失职了。在不到三个具有良好排名标准的字符中，可以发现数量惊人的结果。