Algolia-使用autocomplete.js進行多索引搜索的重構代碼

Question

我希望利用autocomplete.js橋接多個索引。 我發現本教程非常有幫助。 我的問題是，當我要搜索兩個以上的索引時會發生什么？

當前，在我們的項目中，我們將需要搜索30多個不同的索引。 顯然，簡單地一遍又一遍地復制'n粘貼代碼是一件可怕的事情，但是我想不出其他任何方法來完成這項工作。

還有另一種方法可以規范我的代碼嗎？

這是一個例子。 試想一下，在此示例中還有另外28個索引。 您可以看到它很快失控了。

可以在這里找到有效的JSFiddle

var client = algoliasearch('9G2RUKPPGE', '8860a74c330efaf0119818fcdd800126');
var SPR     = client.initIndex('dev-SPR');
var SWG_SPR = client.initIndex('dev-SWG_SPR');

//initialize autocomplete on search input (ID selector must match)
$('#aa-search-input').autocomplete({ hint: false }, [
    {
        source: $.fn.autocomplete.sources.hits(SPR, {
            hitsPerPage: 15
        }),
        displayKey: 'name',
        //hash of templates used when rendering dataset
        templates: {
            //'suggestion' templating function used to render a single suggestion
            suggestion: function(suggestion) {
                const markup = `
                    <div class="row">
                        <div class="col-xs-1 col-sm-1 col-md-1 nopadding">
                            <img src="${suggestion.image}" alt="" class="algolia-thumb">
                        </div>
                        <div class="col-xs-11 col-sm-11 col-md-11">
                            <div class="row">
                                <div class="col-xs-6 col-sm-8 col-md-8">
                                    <span>${suggestion._highlightResult.code.value}</span>
                                </div>
                                <div class="col-xs-6 col-sm-4 col-md-4">
                                    <span>Available Qty: ${suggestion.quantityAvailable.toLocaleString()}</span>
                                </div>
                            </div>
                            <div class="row hidden-xs">
                                <div class="col">
                                    <span>${suggestion.description}</span>
                                </div>
                            </div>
                        </div>
                    </div>`;

                return '<div class="algolia-result">' + markup + '</div>';
            },
            empty: function(options) {
                return '<div class="algolia-result"><span>No results were found with your current selection.</span></div>';
            },
        }
    },
    {
        source: $.fn.autocomplete.sources.hits(SWG_SPR, {
            hitsPerPage: 15
        }),
        displayKey: 'name',
        //hash of templates used when rendering dataset
        templates: {
            //'suggestion' templating function used to render a single suggestion
            suggestion: function(suggestion) {
                const markup = `
                    <div class="row">
                        <div class="col-xs-1 col-sm-1 col-md-1 nopadding">
                            <img src="${suggestion.image}" alt="" class="algolia-thumb">
                        </div>
                        <div class="col-xs-11 col-sm-11 col-md-11">
                            <div class="row">
                                <div class="col-xs-6 col-sm-8 col-md-8">
                                    <span>${suggestion._highlightResult.code.value}</span>
                                </div>
                                <div class="col-xs-6 col-sm-4 col-md-4">
                                    <span>Available Qty: ${suggestion.quantityAvailable.toLocaleString()}</span>
                                </div>
                            </div>
                            <div class="row hidden-xs">
                                <div class="col">
                                    <span>${suggestion.description}</span>
                                </div>
                            </div>
                        </div>
                    </div>`;

                return '<div class="algolia-result">' + markup + '</div>';
            },
            empty: function(options) {
                return '<div class="algolia-result"><span>No results were found with your current selection.</span></div>';
            },
        }
    }
]).on('autocomplete:selected', function(event, suggestion, dataset) {
    window.location.href = window.location.origin + '/' + suggestion.url
});

Answer 1

這行：

$('#aa-search-input').autocomplete({ hint: false }, [] ...

最后一個參數是一個數組。 為什么不能有一個函數，給定的客戶機索引數組將執行所有這些client.initIndex('dev-SPR')然后生成一個包含您現在必須處理的所有對象的數組？

用['dev-SPR'，'dev-SWG_SPR'...]調用該函數

因此，您最終得到：

`$('#aa-search-input').autocomplete({ hint: false }, myNewFn(['dev-SPR','dev-SWG_SPR']))` 

除非客戶端索引中的那些對象中的對象有其他區別，除非...