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']))` 

除非客户端索引中的那些对象中的对象有其他区别，除非...