Display no results from multiple indices with autocomplete.js

In following this tutorial, how can I show the user when there are no results. The current example of the page doesn’t address this issue.

In my current working set I have things working but my ‘no results found’ message applies to all indices where they don’t match. I would prefer to have a single response when a search across all indices return zero results.

A functional JSFiddle can be found here.

This seems to be that it should be simple to figure out. In reading the documentation I thought that I could add a ‘templates’ to the overall options for the autocomplete function. However, when I add the ‘options’ template things break.

Is there an easy way to show a div when all the datasets are empty?

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,
      debug: true
    }, 
    [
    {
        source: $.fn.autocomplete.sources.hits(SPR, {
            hitsPerPage: 10
        }),
        displayKey: 'name',
        templates: {
        		header: 'Spacers',
            suggestion: function(suggestion) {
            	return showSuggestions(suggestion); 
            }
        }
    },
    {
        source: $.fn.autocomplete.sources.hits(SWG_SPR, {
            hitsPerPage: 10
        }),
        displayKey: 'name',
        templates: {
        		header: 'Swage Spacers',
            suggestion: function(suggestion) {
                return showSuggestions(suggestion); 
            }/* ,
            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
});

function showSuggestions(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>';
}

I eventually found the answer and am posting back here for future reference. Refer to this post and I’ll describe how to do it.