Multi index instantsearch.js

by maxiloc

HTML

<script src="//cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.css">
<h1>
<a href="https://github.com/algolia/instantsearch.js/">instantsearch.js</a>: displaying hits from multiple indexes
</h1>
<label>search: <input id="searchBox" /></label>
<h2>
Movies
</h2>
<div id="movies"></div>
<h2>
Products
</h2>
<div id="products"></div>

CSS

em {text-decoration: underline}

JavaScript

var movies = instantsearch({
	appId: 'latency',
  apiKey: '6be0576ff61c053d5f9a3225e2a90f76',
  indexName: 'movies',
  searchFunction: function(helper) {
    var query = movies.helper.state.query;
    products.helper.setQuery(query);
    products.helper.search();
    helper.search();
  }
});

var products = instantsearch({
	appId: 'latency',
  apiKey: '6be0576ff61c053d5f9a3225e2a90f76',
  indexName: 'ikea'
});

var productsHits = instantsearch.widgets.hits({
	container: document.querySelector('#products'),
  hitsPerPage: 3,
  templates: {item: '{{{_highlightResult.name.value}}}'}
});

var moviesHits = instantsearch.widgets.hits({
	container: document.querySelector('#movies'),
  hitsPerPage: 3,
  templates: {item: '{{{_highlightResult.title.value}}}'}
});

var searchBox = instantsearch.widgets.searchBox({
  container: document.querySelector('#searchBox')
});

movies.addWidget(moviesHits);
movies.addWidget(searchBox);
products.addWidget(productsHits);
products.start();
movies.start();