Algolia - Refactor code for multiple indices search with autocomplete.js

Question

I'm looking to bridge multiple indices leveraging autocomplete.js. I found this tutorial very helpful. My issue is what happens when I have a lot more that two indices to search?

Currently in our project we'll have over 30 different indices that will need to be searched. Obviously, simply copy 'n paste code over-and-over again is horrible thing to do, but I can't figure out any other way to make this work then just doing that.

Is there another way of doing things that would normalize my code?

Here is an example of it. Just imagine that there are another 28 indices in this example. You can see that it's out of control quickly.

A working JSFiddle can be found here

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

This line:

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

last parameter is an array. Why can't you have a function which given array of the client indexes would do all these client.initIndex('dev-SPR') and then generate an array with all of the objects you have to deal with now?

Call that function with ['dev-SPR','dev-SWG_SPR' ...]

So you end up with:

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

Unless something else is different in those objects other than the client indexes ...