如果查询文本大于3-4个字符

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上找到了解决方案：。解决方案是重新创建源属性以获取键入查询。

 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

看起来你到达那里。此处也记录在此处，有条件的来源类似：

but with the same query.length > ; 2

I'd be remiss if I didn't mention this is considered an anti-pattern for most autocomplete use cases.令人惊讶的结果可以找到少于三个字符的排名标准。