---
title:                                  Site Search
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
// -------------------------------------------------------------------


The module *Site Search* is based on an _Elasticsearch_ Index hostet at 
_Algolia_. To access the `Algolia index`, the Javascript library 
_InstantSearch_ (instansearch.js) is fully integrated with _J1_. *Site Search*
is bundled with the template like all other modules, e.g. *Toccer*, *Header*
or *Navigator* -- simple to use as only a configuration is need to make this
functionality available with a site.

J1 Template integrates the `jekyll-algolia` Gem, a data collector create the 
search *record data* needed and push the content in an Algolia index in a
single step.

Find the default search client below; packed with the *Site Search* module as
well.

== Site Search

++++
  <!-- CurrentRefinedValues widget -->
  <div id="current-refined-values"></div>

  <!-- ClearAll widget -->
  <div id="clear-all"></div>

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

  <!-- HitsPerPage widget -->
  <!-- div id="hits-per-page-selector"></div -->

  <div id="searcher" class"row">
    <div class="col-md-4 col-xs-6">
      <!-- CurrentRefinedValues widget -->
      <div id="current-refined-values"></div>
      <!-- RefinementList widget -->
      <div id="refinement-list" class="limit-y"></div>
    </div>

    <div class="col-md-8 col-xs-6">
      <!-- Pagination widget -->
      <div id="pagination"></div>
      <!-- Hits widget -->
      <ul class="list-unstyled">
        <div id="search-hits" class="result-list" >
          <div class="result-item"></div>
        </div>
      </ul>
    </div>

  </div>
++++

++++
<style>

input:focus{
  outline: none;
//  box-shadow: 0px 0px 5px #61C5FA;
  border: 1px solid #424242;
}

input:hover {
  border: 1px solid #424242;
  border-radius: 5px;
}

input:focus:hover{
  outline: none;
  box-shadow: 0px 0px 5px #424242;
  border: 1px solid #3f51b5;
  border-radius:0;
}

.limit-y {
  max-height: 500px;
  overflow-y: auto;
}

.ais-pagination {
  -webkit-box-shadow: 0 !important;
  box-shadow: 0 !important;
  width: 100%;
}

.ais-refinement-list {
    margin-top: 1.25rem;
}

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

.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;
}

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