---
title:                                  Search Engine
tagline:                                Algolia Online Search
description:                            Using Algolia Index API for static sites

tags:                                   []
resources:                              [ algolia ]
permalink:                              /pages/public/start/roundtrip/search_engine/

resource_options:

  - toccer:
      collapseDepth:                    2

  - masthead:
      opacity:                          0.2
      slides:
        - url:                          /assets/images/widescreen/featured-1920x800.jpg
          alt:                          featured-1920x800

regenerate:                             true
---

// Enable the Liquid Preprocessor
//
:page-liquid:

// Set other global page attributes here
// -------------------------------------------------------------------


== Search Engine

lorem:sentences[5]

=== Site Search

lorem:sentences[3]

++++
  <!-- SearchBox widget will appear here -->
  <div id="search-searchbar" class="mb-4"> </div>
++++

=== Refine the search

lorem:sentences[2]

++++
  <!-- RefinementList widget will appear here -->
  <div id="refinement-list" class="mb-3"> 
  </div>
++++

=== Search Results

lorem:sentences[2]

++++
  <!-- Hits widget will appear here -->
  <div class="result-list" id="search-hits">
    <div class="result-item"></div>
  </div>
++++

++++
<script>
  const hitTemplate = function(hit) {
    // var re = new RegExp("^\/posts");
    // var re = new RegExp("^\/pages");
    var re = new RegExp("^\/pages|^\/collections");    
    if ( re.test(hit.url) ) {
      let date = '';
      if (hit.date) {
        date = moment.unix(hit.date).format('MMM D, YYYY');
      }
      // let url = `/jekyll-algolia-example${hit.url}#${hit.anchor}`;
      let url = `${hit.url}`;

      const title = hit._highlightResult.title.value;
      let breadcrumbs = '';

      if (hit._highlightResult.headings) {
        breadcrumbs = hit._highlightResult.headings.map(match => {
          return `<span class="post-breadcrumb">${match.value}</span>`
        }).join(' > ')
      }

      const content = hit._highlightResult.html.value;

      return `
        <div class="search-result-item">
          <div class="card card-flat">
            <div class="card-body">
              <span class="post-meta">${date}</span>
              <h2 class="card-title">${title}</h2>
              <h6 class="card-subtitle mb-2 text-muted">${hit.tagline}</h6>
              <div class="card-text">${content}</div>
              <div class="card-footer">
                <a class="card-link" href="${url}" target="_blank">Read more ..</a>
              </div>
            </div>
          </div>
        </div>
      `;
    }
  }

  <!-- Access credentials and index -->
  const search = instantsearch({
    appId: '{{ site.algolia.application_id }}',
    apiKey: '{{ site.algolia.search_only_api_key }}',
    indexName: '{{ site.algolia.index_name }}',
    routing: true
  });
  // initialize SearchBox
  search.addWidget(
    instantsearch.widgets.searchBox({
      container: '#search-searchbar',
      placeholder: 'Search this site ..',
      poweredBy: true // This is required if you're on the free Community plan
    })
  );
  // initialize hits widget
  search.addWidget(
    instantsearch.widgets.hits({
      container: '#search-hits',
      templates: {
        empty: 'No results',
        item: hitTemplate
      }
    })
  );
  // initialize RefinementList
  search.addWidget(
    instantsearch.widgets.refinementList({
      container: '#refinement-list',
      attributeName: 'outsideDiameter.description',
      collapsible: true,
      operator: "and",
      limit: 5,
      sortBy: ["isRefined","count:asc","name:asc"],
      showMore: true,
      attributeName: 'tags'
    })
  );
  search.start();
</script>
++++

++++
<style>
.ais-search-box {
  max-width: 100%;
  margin-bottom: 15px;
}

.ais-search-box--input {
  padding-left: 2.5rem !important;
}

.ais-search-box--magnifier {
  top: 1rem !important;
  right: 1rem !important;
  left: 1rem !important;
}

.ais-search-box--reset {
  top: 1rem !important;
  right: 1rem !important;
}

.search-result-item {
  margin-bottom: 30px;
}

em.ais-Highlight {
  font-weight: bold;
  font-size: 1.125rem;
  font-style: inherit;
  color: #3f51b5;
}
</style>
++++