If you want to use another template than the one provided with TalkSearch.js to display your results, then you don't need TalkSearch.js.

TalkSearch.js is one example of how you could display your results. Remember that underneath, we're using the hits widget of InstantSearch.js. If you want to tweak the rendering, you can directly use this widget and build any markup you want.

This guide will give you the basics of InstantSearch.js, but you can find more detailed information on its dedicated website.

Note that InstantSearch is also available for React, Vue, Angular, Android and iOS. This guide will assume you're using the Vanilla JavaScript version, but the same concepts can be applied to other flavors as well.

Configuration

Start by including the JavaScript library as well as the default CSS styling.

<script
src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.8.1"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.8.1/dist/instantsearch.min.css">

<!-- You can also add this theme to add a Bootstrap-like appearance to your widgets. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.8.1/dist/instantsearch-theme-algolia.min.css">

Pagination

If you have more than one page of results, you can use the pagination widget to allow your users to navigate all the pages.

<div id="pagination"></div>

search.addWidget(
  instantsearch.widgets.pagination({
    container: '#pagination',
    maxPages: 20
  })
);

Check the pagination widget documentation for more information about the parameters and styling options.

Menu

Menus can be used to filter videos based on specific field. A menu on the conference.year field for example would allow you to filter results to display videos of 2018, or 2017, etc.

<div id="years"></div>

const search = instantsearch({
  […]
  searchParameters: {
    facetingAfterDistinct: true,
  },
});

search.addWidget(
  instantsearch.widgets.menu({
    container: '#years',
    attributeName: 'conference.year',
    sortBy: ['name:desc'],
  })
);

Note that when using a menu, you need to pass searchParameters.facetingAfterDistinct: true to your initial instantsearch call. If you don't do this, the number of matches displayed next to each menu item won't be accurate.

Check the menu widget documentation for more information about the parameters and styling options.

Refinement List

Refinement lists are menus that allow you to select more than one filter. Instead of displaying the videos of one specific speaker, you can filter to display all videos featuring either Alex or Sam or even all videos featuring both Alex and Sam.

<div id="speakers"></div>

const search = instantsearch({
  […]
  searchParameters: {
    facetingAfterDistinct: true,
  },
});

search.addWidget(
  instantsearch.widgets.menu({
    container: '#speakers',
    attributeName: 'speakers.name',
    sortBy: ['count:desc'],
  })
);

Note that like the menu widget, you need to pass searchParameters.facetingAfterDistinct: true to your initial instantsearch call for the count to be accurate.

Check the menu widget documentation for more information about the parameters and styling options.

Other widgets

InstantSearch.js comes with a lot more widgets and you can even create your own. Don't hesitate to refere to the original documentation for more information.