algolia-search-scripts.html

<!-- Including InstantSearch.js library and styling -->
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch-theme-algolia.min.css">

<script>
// Instanciating InstantSearch.js with Algolia credentials
const search = instantsearch({
  appId: '{{ site.algolia.application_id }}',
  apiKey: '{{ site.algolia.search_only_api_key }}',
  indexName: '{{ site.algolia.index_name }}',
  searchParameters: {
    restrictSearchableAttributes: [
      'title',
      'content'
    ]
  }
});

const hitTemplate = function(hit) {
  const url = hit.url;
  const title = hit._highlightResult.title.value;
  const content = hit._highlightResult.html.value;

  return `
    <div class="list__item">
      <article class="archive__item" itemscope itemtype="http://schema.org/CreativeWork">
        <h2 class="archive__item-title" itemprop="headline"><a href="{{ site.baseurl }}${url}">${title}</a></h2>
        <div class="archive__item-excerpt" itemprop="description">${content}</div>
      </article>
    </div>
  `;
}

// Adding searchbar and results widgets
search.addWidget(
  instantsearch.widgets.searchBox({
    container: '.search-searchbar',
    {% unless site.algolia.powered_by == false %}poweredBy: true,{% endunless %}
    placeholder: '{{ site.data.ui-text[site.locale].search_placeholder_text | default: "Enter your search term..." }}'
  })
);
search.addWidget(
  instantsearch.widgets.hits({
    container: '.search-hits',
    templates: {
      item: hitTemplate
    }
  })
);

// Starting the search
search.start();
</script>