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

Question

我试图限制 AlgoliaSearch 仅当用户在输入框中键入超过 3-4 个字符时才显示自动完成的结果，我尝试使用 jquery 中的按键事件来执行此操作但不幸的是不起作用，我尝试搜索 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-options。解决方案是重新创建源 属性 以获得类型化查询。

 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-conditional-sources

但相同 query.length > 2

如果我没有提到这被认为是大多数自动完成用例的 anti-pattern，那我就是失职了。少于三个字符且具有良好排名标准的结果数量惊人。